一、利用el-table自带方法selection-change（当选择项发生变化时触发该事件）
关键代码：this.$refs.serialnoTable.clearSelection() this.$refs.serialnoTable.toggleRowSelection(val.pop())
1.@selection-change="handleSelectionChange" 是重点改变点击选择框后的事件：
<el-table ref="multipleTable" :data="persionTable" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"> </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> 2.ref="multipleTable" 是必须的，后面会用到这个的实例方法clear 用来清空所有勾选项利用判断来判断如果超过一个勾选框就先清空最后把当前最新勾选的那一项放入用来储存勾选容器this.multipleSelectionUpdate内
注意点： 需要注意不实时更新的bug： this.$set(this.multipleSelectionUpdate, val[0]);
// 勾选框
handleSelectionChange(val) {
// this.multipleSelection = val;
if (val.length > 1) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(val.pop());
} else {
this.multipleSelectionUpdate = val;
}
// this.multipleSelectionUpdate = val[0];// 这种赋值同样不会实时更新
this.$set(this.multipleSelectionUpdate, val[0]);
console.log(this.multipleSelectionUpdate, this.multipleSelection); // 此时要回显到页面的值
},
3.如果简化写法，简单用，这样写也同样可以快速单选切换：
handleSelectionChange(val) {
this.multipleSelection = val;
if (val.length > 1) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(val.pop());
}
},
二、
1.将element中的 table 表格 组件中的 多选 代码,拷贝到自己的前端项目中:
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" >
<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>
2.去除 表头出行 多选的勾选框，在 el-table 的标签中 加上样式 class = "table-style",从样式上隐藏 该全选的勾选框, 代码如下
<el-table class="table-style" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" > <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> <-- 从样式上 隐藏 全选勾选框 --> <style lang="less"> .table-style { .el-table-column--selection.is-leaf .el-checkbox { display: none; } } </style> 3.将多选改为 单选 功能，在el-table 的标签中重新定义 一个方法 @select="selectInfo" ,用于将单选功能实现, 代码如下: <el-table class= "table-style" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select="selectInfo"> <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> <script> data() { return { multipleTable: "", //所选择的表格数据指向 }; }, methods: { selectInfo(selection, row) { console.log(selection, row); // 清除 所有勾选项 this.$refs.multipleTable.clearSelection(); // 当表格数据都没有被勾选的时候 就返回 // 主要用于将当前勾选的表格状态清除 if (selection.length == 0) return; this.$refs.multipleTable.toggleRowSelection(row, true); }, } </script> <-- 从样式上 隐藏 全选勾选框 --> <style lang="less"> .table-style { .el-table-column--selection.is-leaf .el-checkbox { display: none; } } </style> 三、 <template> <div> <el-table ref="multipleTable" :data="tableData" highlight-current-row @select-all="onSelectAll" @selection-change="selectItem" @row-click="onSelectOp" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="序号" type="index" align="center" /> <el-table-column label="姓名" prop="name" align="center" /> <el-table-column label="手机号码" prop="province" align="center" /> </el-table> </div> </template> <script> export default { data() { return { tableData: [{ name: '王小虎1', province: '上海1', }, { name: '王小虎2', province: '上海2', }, { name: '王小虎3', province: '上海3', }, { name: '王小虎4', province: '上海4', }], } }, mounted(){ }, methods: { onSelectAll() { this.$refs.multipleTable.clearSelection(); }, selectItem(rows) { if (rows.length > 1) { const newRows = rows.filter((it, index) => { if (index == rows.length - 1) { this.$refs.multipleTable.toggleRowSelection(it, true); return true; } else { this.$refs.multipleTable.toggleRowSelection(it, false); return false; } }); this.multipleSelection = newRows; } else { this.multipleSelection = rows; } // this.userId = this.multipleSelection.length? this.multipleSelection[0].guid: ""; console.log('2',this.multipleSelection) }, onSelectOp(row) { this.$refs.multipleTable.clearSelection(); this.$refs.multipleTable.toggleRowSelection(row, true); this.multipleSelection = []; this.multipleSelection.push(row); }, } }; </script> 标签：val,refs,表头,element,单选,multipleTable,table,multipleSelection,row From： https://www.cnblogs.com/ayuaichiyu/p/17502773.html