Vue3之ElementPlus中Table选中数据的获取与清空方法
文章目录
- Vue3之ElementPlus中Table选中数据的获取与清空方法
- 1. 点击按钮获取与清空选中表格的数据
- 1. 用到ElementPlus中Table的两个方法
- 2. 业务场景
- 3. 操作案例
1. 点击按钮获取与清空选中表格的数据
1. 用到ElementPlus中Table的两个方法
这里需要用到Element-plus中Table 方法的两个方法
getSelectionRows | 返回当前选中的行 |
---|---|
clearSelection | 用于多选表格,清空用户的选择 |
2. 业务场景
业务场景:根据操作按钮获取表格选中的数据,关闭组件或点取消按钮时清空选中的表格数据
获取表格数据:调用getSelectionRows方法,如
tableRef.value.getSelectionRows()
清空已选择的表格数据:调用clearSelection方法,如:
tableRef.value.clearSelection()
3. 操作案例
- 定义表格信息
<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>
- 完整案例
<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>