VUE el-table复选框全部勾选以及勾选回显

在Vue中使用Element UI的el-table组件时，可以通过el-table-column的type="selection"来添加复选框，实现全选和反选的功能。

以下是实现全选和勾选回显的示例代码：

<template>
  <div>
    <!-- 全选复选框 -->
    <el-checkbox v-model="selectAll" @change="handleSelectAllChange">全选</el-checkbox>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        :selectable="isSelectable">
      </el-table-column>
      <!-- 其他列定义 -->
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <!-- 更多列 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectAll: false, // 全选复选框的状态
      selectedRows: [], // 已勾选的行
      tableData: [{ name: 'Tom', date: '2023-01-01' }, { name: 'Jerry', date: '2023-01-02' }] // 表格数据
    };
  },
  methods: {
    // 全选复选框变化时的处理函数
    handleSelectAllChange(value) {
      if (value) {
        this.selectedRows = this.tableData.slice(); // 全选时，将所有数据添加到已勾选数组
      } else {
        this.selectedRows = []; // 取消全选时，清空已勾选数组
      }
    },
    // 单个复选框变化时的处理函数
    handleSelectionChange(selection) {
      this.selectedRows = selection; // 更新已勾选的行数组
      this.selectAll = selection.length === this.tableData.length; // 判断是否全选
    },
    // 定义是否可以选中的函数，可根据具体需求自定义逻辑
    isSelectable(row, index) {
      // 示例：禁止选中第一条数据
      return index !== 0;
    }
  }
};
</script>

在这个例子中，我们定义了一个selectAll变量来控制全选复选框的状态，并在handleSelectAllChange方法中处理全选操作。handleSelectionChange方法则用于更新已勾选的行数组selectedRows，并根据当前勾选的行数和数据总数判断是否需要勾选全选复选框。isSelectable函数用于定义哪些行可以被选中，例如禁止选中第一条数据。

你可以根据实际需求调整selectAll、selectedRows和tableData的定义，以及相关方法的实现。