vue+elementui table勾选 select与selection-change的区别

在Vue.js中使用Element UI库时，Table组件提供了select事件和selection-change事件来处理行的勾选。

• select事件：当用户手动勾选数据行的Checkbox时触发，返回选中的行数据。
• selection-change事件：当选择项发生变化时会触发，返回选中的行数据数组。

select事件更适合用于捕获用户的勾选操作，而selection-change更适合用于获取最终的选中状态。

以下是两种事件的使用示例：

<template>
  <el-table
    :data="tableData"
    @select="handleSelect"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="120">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02' }, { date: '2016-05-04' }]
    };
  },
  methods: {
    handleSelect(selection, row) {
      console.log('Selected:', row);
    },
    handleSelectionChange(selection) {
      console.log('Selection changed:', selection);
    }
  }
};
</script>

在这个例子中，handleSelect方法会在用户点击选择框时被调用，并接收当前行的数据。handleSelectionChange方法会在选择项变化时被调用，并接收当前所有选中行的数组。