vue3 markRow的使用

Vue3 中 markRow 是一个钩子函数，用于标记表格中的行。

使用 markRow 可以实现以下功能：

1. 标记某一行为选中状态，方便后续操作。

2. 标记某一行为高亮状态，以便突出显示。

3. 标记某一行为禁用状态，以防止用户进行操作。

下面是一个使用 markRow 的示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>职业</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index" :class="{selected: item.selected}" @click="markRow(index)">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.job}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {name: '张三', age: 18, job: '学生', selected: false},
        {name: '李四', age: 22, job: '工人', selected: false},
        {name: '王五', age: 30, job: '经理', selected: false}
      ]
    }
  },
  methods: {
    markRow(index) {
      this.list.forEach((item, i) => {
        item.selected = i === index ? !item.selected : false
      })
    }
  }
}
</script>

在上述示例中，我们使用了 v-for 指令来循环渲染表格数据，通过 :class 绑定一个对象，根据 item.selected 的值来判断是否为选中状态。

在 markRow 方法中，我们遍历了 list 数组，将选中行的 selected 值设置为 true，其他行的 selected 值设置为 false。

通过这种方式，我们就可以实现通过点击行来标记选中状态的功能。