实现和el-table一样的复选效果

要实现和el-table一样的复选效果，可以先在页面上定义一个复选框（checkbox）的元素，并为其绑定一个v-model，绑定的值可以是一个数组，用于存储选中的行的数据。

然后，在el-table的列定义中，添加一个自定义列，使用el-table-column的type属性设置为"selection"，这将在表头显示一个全选的复选框，同时每一行的该列会显示一个复选框。

接下来，将el-table的@selection-change事件绑定到一个方法上，在该方法中，通过参数传入的选中的行的数据（selection）来更新绑定的v-model的值。

最后，可以根据选择的行进行相应的处理，比如删除选中的行、导出选中的数据等。

具体实现步骤如下：

1. 在页面上定义一个复选框的元素，并绑定一个v-model:

<template>
  <div>
    <el-checkbox v-model="selectedRows" @change="handleAllSelection"></el-checkbox>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <!-- 其他表格列 -->
      <el-table-column type="selection"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRows: [], // 存储选中的行的数据
      tableData: [...], // 表格数据
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    handleAllSelection(value) {
      this.selectedRows = value ? this.tableData : [];
    },
  },
};
</script>

2. 在handleSelectionChange方法中，将传入的选中的行的数据(selection)赋值给v-model(selectedRows)，这样每次选中的行发生变化时，selectedRows也会进行更新。

3. 可以根据需要，对选中的行进行相应的处理。比如，删除选中的行:

handleDeleteSelectedRows() {
  this.tableData = this.tableData.filter((row) => {
    return !this.selectedRows.includes(row);
  });
  this.selectedRows = [];
},

通过以上实现，就可以实现和el-table一样的复选效果。