描述:
ElementUI有单选触发方式,但所做系统表格中 ,有一列是点击详情,所以需要利用ElementUI多选方式。实现效果如下:
将多选改为单选:
解决方法一:
1. HTML
<el-table ref="selectTable" :data="tableData" class="more_btn" v-loading="loading" element-loading-text="拼命加载中,请稍候......" border @selection-change="selectRow" @select="selectCur">
</el-table>
2. JS
// 选择变化时
selectRow(val) {
if (val.length > 1) {
this.$refs.selectTable.clearSelection()
this.$refs.selectTable.toggleRowSelection(val.pop())
}
},
3. CSS(将全选项隐藏)
// 将全选项隐藏
.more_btn thead .el-table-column--selection .cell {
display: none;
}
解决方法二:
JS
selectCur(val, row) {
console.log(val, 'val')
console.log(row, 'row')
this.$refs.selectTable.clearSelection()
this.$refs.selectTable.toggleRowSelection(row, true)
},
注:但是这种方法只能切换勾选,不可以取消勾选
解决方法三:
1. HTML
删除了 @selection-change=“selectRow” 方法
<el-table ref="selectTable" :data="tableData" class="more_btn" v-loading="loading" element-loading-text="拼命加载中,请稍候......" border @select="selectCur">
</el-table>
2.JS
// 选择时
selectCur(selection, row) {
const selectTable = this.$refs.selectTable
if (selection.includes(row)) {
selectTable.clearSelection()
this.$nextTick(() => {
selectTable.toggleRowSelection(row, true)
this.selectCurRow = row
})
} else {
this.selectCurRow = undefined
}
}
3. CSS(将全选项隐藏)
// 将全选项隐藏
thead .el-table-column--selection .cell {
display: none;
}