首页vue3 element-plus el-table多选

vue3 element-plus el-table多选

时间: 2025-01-22 16:39:58 浏览: 77

### Vue3 中使用 Element Plus 的 `el-table` 组件实现多选功能在 Vue3 和 Element Plus 中，通过配置 `el-table-column` 并设置其属性为 `type="selection"` 可以轻松启用表格的多选功能[^1]。下面是一个完整的示例来展示如何创建一个多选表单： ```html <template> <div style="margin: 20px;">  <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"/> <el-table-column prop="date" label="日期" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="address" label="地址" /> </el-table> <br />  <span>选择了 {{ multipleSelection.length }} 行</span> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, // 更多项... ] // 存储当前被选中的行数据 let multipleSelection = ref([]) // 当用户改变所选项时触发此函数更新 selectedItems 数组的内容 function handleSelectionChange(val) { multipleSelection.value = val; } // 提供一个方法用来清空所有的选择状态 function toggleSelection(rows?) { if (rows) { rows.forEach(row => { this.$refs.multipleTableRef.toggleRowSelection(row); }); } else { this.$refs.multipleTableRef.clearSelection(); } } </script> ``` 为了能够调用像 `clearSelection()` 这样的 API 方法，需要给 `<el-table>` 添加 `ref` 属性以便于后续操作该实例对象。当想要重置用户的选取时，则可以通过这个引用访问到对应的 API 来执行相应的动作[^2]。

阅读全文