Vue3之ElementPlus中Table选中数据的获取与清空方法

<template>
  <el-button @click="clearSelection">清空选择</el-button>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref([{ /* 数据对象 */ }]); // 假设这里有数据
    const multipleTable = ref(null);
    const selectedRows = ref([]);
 
    const handleSelectionChange = (val) => {
      selectedRows.value = val;
    };
 
    const clearSelection = () => {
      multipleTable.value.clearSelection();
    };
 
    return {
      tableData,
      handleSelectionChange,
      clearSelection,
      multipleTable,
      selectedRows
    };
  }
};
</script>

这个代码实例展示了如何在Vue 3和Element Plus中使用el-table组件的selection-change事件和clearSelection方法来处理表格选中数据的获取和清除。handleSelectionChange方法用于获取当前选中的行，而clearSelection方法在点击按钮时被调用，用于清除当前的选择。