elementUi中Table表格添加多选,及多选的清空函数
- 实现多选非常简单: 手动添加一个
el-table-column
,设type
属性为selection
即可;
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template>
ref 绑定数据对象data中的数据 multipleTable用于储存选中的选项:
<script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] //用于存储选中行数据的集合 } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); //清空选项,项目中:请求接口后,重新请求数据渲染页面的时候,使用此方式,清空选中勾选状态。 } }, handleSelectionChange(val) { this.multipleSelection = val; } } } </script>
项目中如果只能选择一个数据进行操作:
@selection-change事件 :选项发生变化时触发
<el-table @selection-change="handleSelectionChange" ref="multipleTable" :key="tableKey" :data="tableData" row-key="id" v-loading="tableLoading" element-loading-text="给我一点时间" fit size="mini" tooltip-effect="dark" style="width: 100%;font-size: 12px;margin-bottom:15px;border-radius:3px;" :header-cell-style="tableHeaderColor" >
methods:方法
handleSelectionChange(val) { // 返回值val是选中行数据的集合 this.multipleSelection = val.map(item => item.id); this.isProcurementStatus = val.map(item => item.procurementStatus); this.forDialogTitle = val.map(item => item.purchaseProject); },
通过判断 multipleSelection长度确定选中的个数
Made by ---- Rise To The Heightest Then Qualitative Change