vue的el-table单元格设置成复选框

在Vue.js中，你可以使用`v-model`指令将一个`el-table`表格中的单元格设置为复选框。`element-ui`库中的`el-table-column`组件允许你在表格列中添加自定义内容，包括输入元素如复选框。这里是一个简单的例子：

<template>
  <el-table :data="tableData">
    <el-table-column type="selection" width="55"> <!-- 表头选择框 -->
      <template slot-scope="scope">{{
        // 使用 scoped slot 渲染每个单元格的复选框
        <el-checkbox v-model="scope.row.select" @change="handleCheckboxChange(scope.$index)"></el-checkbox>
      }}</template>
    </el-table-column>
    <el-table-column label="标题1">...</el-table-column>
    ... <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, select: false, ... }, // 每行数据包含一个select属性用于绑定复选状态
        { id: 2, select: true, ... },
        ...
      ],
      // handleCheckboxChange方法处理复选框变化事件
      handleCheckboxChange(index) {
        console.log(`第${index + 1}行的复选框状态已改变`);
      }
    };
  }
};
</script>

在这个例子中，每个表格行的数据都包含一个`select`字段，复选框的状态通过`v-model`绑定到这个字段。当用户勾选或取消勾选复选框时，`handleCheckboxChange`函数会被触发，可以在此处添加对应的操作。