elementui-＞table 多选点击checkbox和行均选中

在 Element UI 的 Table 组件中，可以通过设置 reserve-selection 属性来实现默认勾选所有行。此外，可以通过编程方式控制勾选状态，以实现点击行时也能改变 Checkbox 的勾选状态。

以下是一个简单的示例，展示如何实现点击行同时勾选 Checkbox 的功能：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @row-click="handleRowClick"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
    :row-key="getRowKey"
    highlight-current-row
  >
    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
    <el-table-column property="date" label="日期" width="180"></el-table-column>
    <el-table-column property="name" label="姓名" width="180"></el-table-column>
    <el-table-column property="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, /* ... more data ... */],
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    handleSelectionChange(selection) {
      // 处理选中行的逻辑
    },
    getRowKey(row) {
      return row.id;
    }
  }
};
</script>

在这个示例中：

• 使用 @row-click 事件处理程序 handleRowClick 来处理点击行的事件。
• 使用 @selection-change 事件处理程序 handleSelectionChange 来处理选中项的变化。
• 使用 toggleRowSelection 方法来切换某一行的选中状态。
• 使用 :row-key 属性来指定每行的唯一键值，这是必要的因为 Element UI 内部通过这个属性来管理选中状态。
• 使用 highlight-current-row 属性来高亮显示当前选中的行。
• 使用 :reserve-selection 属性来保持选中状态，即使在切换分页时也能保持之前的选中状态。

这样，用户在点击行时就可以勾选或取消勾选 Checkbox，并且在分页切换后选中的行状态也会被保持。