vue el-table带el-checkbox

在Vue中，`<el-table>` 是 Element UI 提供的一个表格组件，它结合了数据绑定和样式模板，非常适合展示结构化数据。当需要在表格中添加复选框 (`el-checkbox`) 的时候，可以配合 `v-model` 指令来控制每个单元格的状态，并通过事件监听来处理用户的勾选操作。

例如，你可以这样做：

<template>
  <el-table :data="tableData">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column property="name" label="姓名"></el-table-column>
    <el-table-column property="age" label="年龄"></el-table-column>
    <!-- 添加一个自定义列来显示复选框 -->
    <el-table-column prop="selectMe" label="选择">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.selectMe" @change="handleCheckboxChange(scope.$index, scope.row)"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, selectMe: false },
        { name: '李四', age: 25, selectMe: true },
        // 更多数据...
      ],
      selectedRows: [],
    };
  },
  methods: {
    handleCheckboxChange(index, row) {
      if (row.selectMe) {
        this.selectedRows.push(row);
      } else {
        const indexInSelected = this.selectedRows.findIndex(item => item.id === row.id);
        if (indexInSelected !== -1) {
          this.selectedRows.splice(indexInSelected, 1);
        }
      }
    },
  },
};
</script>

在这个例子中，`handleCheckboxChange` 方法会被触发，每当复选框状态改变时，会更新 `selectedRows` 数组，记录哪些行被选中。