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

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

1. 点击按钮获取与清空选中表格的数据

1. 用到ElementPlus中Table的两个方法

这里需要用到Element-plus中Table 方法的两个方法

2. 业务场景

业务场景：根据操作按钮获取表格选中的数据，关闭组件或点取消按钮时清空选中的表格数据

1. 获取表格数据：调用getSelectionRows方法，如tableRef.value.getSelectionRows()

2. 清空已选择的表格数据：调用clearSelection方法，如：tableRef.value.clearSelection()

3. 操作案例

1. 定义表格信息

<template><el-dialog :title="dialog.title" v-model="dialog.visible" width="1500px" append-to-body><el-table ref="tableRef" :data="entrustProjectList" @selection-change="handleProject"><el-table-column type="selection" width="55" align="center" /><el-table-column label="名称" align="center" prop="name" /></el-table-column></el-table><template #footer><div class="dialog-footer"><el-button type="primary" @click="getSelectedTableData">获取选中的表格数据</el-button><el-button @click="clearSelectedTableInfo">清空选中的表格数据</el-button></div></template></el-dialog>
</templte>

2. 完整案例

<template><el-dialog :title="dialog.title" v-model="dialog.visible" width="1500px" append-to-body><el-table ref="tableRef" :data="entrustProjectList" @selection-change="handleProject"><el-table-column type="selection" width="55" align="center" /><el-table-column label="名称" align="center" prop="name" /></el-table-column></el-table><template #footer><div class="dialog-footer"><el-button type="primary" @click="getSelectedTableData">获取选中的表格数据</el-button><el-button @click="clearSelectedTableInfo">清空选中的表格数据</el-button></div></template></el-dialog>
</templte>
<script setup lang="ts">
import {ref} from "vue";
//表格组件
const tableRef = ref()
/*** 获取表格数据按钮事件*/
const getSelectedTableData = () => {//通过Element-Plus表格的getSelectionRows的方法，获取已选中的数据let tableData = tableRef.value.getSelectionRows();console.log("选中数据",tableData)
};const clearSelectedTableInfo = () => {console.log("清空选中数据前==",tableRef.value.getSelectionRows())//清空数据，通过Element-Plus表格的clearSelection的方法，清空所有已选中的数据tableRef.value.clearSelection()console.log("清空选中数据后==",tableRef.value.getSelectionRows())
};    
</script>