场景

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

多选效果

单选效果

注：

博客：

/badao_liumang_qizhi

关注公众号

霸道的程序猿

获取编程相关电子书、教程推送与免费下载。

实现

实现多选

在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-tablev-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: [],

声明。

效果