el table 默认勾选某行 vue

在Vue.js中，如果你想让el-table组件默认选择某一行，可以使用`v-model`属性绑定一个数组，并在数据中预先设置一个标记该行的数据项为已选的状态。首先，在data中定义一个数组，比如：

data() {
  return {
    selectedRowKeys: [], // 用于存储选中的行的key
    tableData: [
      { id: 1, name: '行一', checked: false },
      { id: 2, name: '行二', checked: false },
      { id: 3, name: '行三', checked: true } // 预设某行为已选状态
    ]
  }
}

然后在模板上绑定`selectedRowKeys`到表格的`row-key`和`default-checked-keys`属性上：

<el-table :data="tableData" row-key="id">
  <template slot-scope="scope">
    <el-checkbox v-model="scope.row.checked"
                @change="handleCheckboxChange(scope.$index, scope.row)">选择</el-checkbox>
    <!-- 其他列内容 -->
  </template>
</el-table>

<script>
methods: {
  handleCheckboxChange(index, row) {
    if (row.checked) {
      this.selectedRowKeys.push(row.id); // 行被选中时添加键值
    } else {
      const indexInSelected = this.selectedRowKeys.indexOf(row.id);
      if (indexInSelected !== -1) {
        this.selectedRowKeys.splice(indexInSelected, 1); // 行取消选中时移除键值
      }
    }
  }
}
</script>

在这个例子中，当用户点击行内的复选框时，`handleCheckboxChange`方法会被触发，更新`selectedRowKeys`数组。这样，默认显示已设置`checked: true`的那行会被勾选。