demo中版本element-ui版本为: “^2.15.12”)
在element-ui中是为我们准备好了可直接使用的单选与多选属性的。但是单选与多选的形式不一样,在某些情况下我们可能想让它们的选择方式尽量统一,于是我想能不能把利用多选属性实现多选,并用一个变量来控制表格是多选还是单选。
要实现单选有两步:一、隐藏多选选择框。二、每次选择只能选择一个。
一、隐藏多选选择框
第一个最好实现,打开f12找到相应元素,隐藏即可。css代码如下:
给 < el-table > 添加上no-multiple这个class即可隐藏多选。
.no-multiple {
// 隐藏多选
::v-deep .el-table__header-wrapper .el-checkbox {
display: none;
}
}
二、实现每次选择只能选择一个
template部分:
(给el-table添加selection-change和select方法)
<el-table
v-loading="isLoading"
ref="multipleTable"
height="340px"
:data="tableData"
:class="{ 'no-multiple': !isMultiple }"
@selection-change="handleSelectionChange"
@select="selectTable"
>
</el-table>
js部分:
handleSelectionChange(val) {
// 通过配置判断是否可多选
if (this.isMultiple) {
this.multipleSelection = val
} else {
if (val.length > 1) {
this.$refs.multipleTable.clearSelection()
this.$refs.multipleTable.toggleRowSelection(val.pop())
}
}
},
selectTable(selection, row) {
// 单选时
if (!this.isMultiple) {
this.multipleSelection = [row]
}
}
我们在data中定义了一个变量isMultiple来决定是否单选,也可以放在props中外部传入控制。以上就是涉及到多选模式下使用单选的主要代码了。
本文章转载自 :https://blog.csdn.net/weixin_44350560/article/details/131886271