如何将ElementUI的el-table从单选改为多选？

本文共计501个文字，预计阅读时间需要3分钟。

场景

实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可。

多选效果

单选效果

注：

关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。

实现

实现多选

在el-table中添加一个el-table-column 设置类型为selection即可

<el-table v-loading="loading" :data="dkszList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-column label="工号" align="center" prop="gh"/> </el-table>

并且通过

@selection-change="handleSelectionChange"

设置其所选项改变事件，在事件对应的方法handleSelectionChange中

// 多选框选中数据 handleSelectionChange(selection) { //获取所有选中项的gh(工号)属性的值 this.ghs = selection.map(item => item.gh) //获取所有选中项数组的长度 this.selectedNum = selection.length },

其中selection是作为选中项的一个数组，可以通过map方法来获取对应gh列即工号列的所有值

其中this.ghs 和 this.selectedNum 要提前声明

data() { return { // 选中数组 ghs: [], //选中的记录数量 selectedNum:0,

效果

实现单选

<el-table v-loading="loading" :data="kqryszList" @selection-change="handleSelectionChange" ref="tb" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="工号" align="center" prop="gh" /> </el-table>

与实现多选类似，需要添加一列类型为selection。

除了设置其选项改变事件外，还需要设置其ref属性。

设置ref的目的是能在方法中通过

this.$refs.tb

获取这个table

在方法handleSelectionChange中

// 单选框选中数据 handleSelectionChange(selection) { this.checkedGh = selection[0].gh; if (selection.length > 1) { this.$refs.tb.clearSelection(); this.$refs.tb.toggleRowSelection(selection.pop()); } },

此方法的实现逻辑就是，通过设置的ref属性和 this.$refs.tb来获取这个table，

然后判断选择项的数组selection的长度大于1的话就清除数组并设置选择最后一次选中的项。

并且通过

this.checkedGh = selection[0].gh;

获取选项行的gh属性的值。

其中checkedGh需要提前在

data() { return { //选中的工号 checkedGh: [],

声明。

效果