【element ui系列】分享几种实现el-table表格单选的方法

在实际的开发中，经常会用到从表格中选择一条记录的情况，虽然官方给出的例子，但是给人感觉看起来不明显，于是，在此基础上做了改进。接下来，介绍两种常见的实现方法：

1、采用复选框(checkbox)实现，去掉表头多选框，代码如下：

<template><div class="app-container"><el-tablestripe ref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"class="section-table"@row-click="clickRow"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table></div>
</template><script>export default {data() {return {tableData: [{id: '1',date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '2',date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '3',date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '4',date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '5',date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '6',date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '7',date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],selectList: []}},methods: {toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.selectList = val;// 单选if (val.length > 1 ) {this.$refs.multipleTable.clearSelection();this.$refs.multipleTable.toggleRowSelection(val.pop());}},// 点击一行时选中clickRow(row){          // 单选选中行if (this.selectList[0] == row) {// 取消this.selectList = [];this.$refs.multipleTable.clearSelection();} else {// 选择this.selectList = [row];this.$refs.multipleTable.clearSelection();this.$refs.multipleTable.toggleRowSelection(row, true);}           },}}
</script>
<style>
/*  将全选项隐藏 */
.section-table thead .el-table-column--selection .cell {display: none;
}</style>

效果如图：

2、采用单选框(radio)，双击取消选中

<template><div class="app-container"><el-tableref="singleTable":data="tableData"highlight-current-row     @row-dblclick="rowClick2"@current-change="handleCurrentChange"style="width: 100%"><el-table-column width="35"><template slot-scope="scope"><el-radioclass="radio":label="scope.row"v-model="currentRow"             >{{""}}</el-radio></template></el-table-column><el-table-columnproperty="date"label="日期"width="120"></el-table-column><el-table-columnproperty="name"label="姓名"width="120"></el-table-column><el-table-columnproperty="address"label="地址"></el-table-column></el-table></div>
</template><script>export default {data() {return {tableData: [{id: '1',date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '2',date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '3',date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '4',date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '5',date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '6',date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '7',date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],currentRow: null}},methods: {setCurrent(row) {this.$refs.singleTable.setCurrentRow(row);},handleCurrentChange(row) {this.currentRow = row;},rowClick2(row, column, event) {        if (this.currentRow && row.date == this.currentRow.date) { this.setCurrent();this.currentRow = null;       } else {this.currentRow = row;}},}}
</script>
<style>/*  将radio的label隐藏 */
.el-radio__label{display: none !important;}
</style>

效果如下图：