2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 复选框变单选 简单操作

复选框变单选 简单操作

时间:2018-09-21 00:17:46

相关推荐

复选框变单选 简单操作

当你的复选框辛辛苦苦做好时 你亲爱的产品大大说要改成单选

快速方法

1.隐藏调全选按钮 通过display:none

注意加个单独样式 不然所有的勾选按钮都会被隐藏

.more_btn thead .el-table-column--selection .cell {display: none;}

这个方法好像不太好用了,没关系 还有第二个方案

首先html部分

<el-tableref="singleTable":data="tableData"highlight-current-row@selection-change="handleSelectionChangeOne":header-cell-class-name="cellClass"class="table"style="width: 100%">

js部分

cellClass(row) {console.log(row)if (row.columnIndex === 0) {return 'DisableSelection'}},

css部分

.table /deep/ .DisableSelection > .cell {display: none !important;}

2.接下来处理单选

利用change事件

handleSelectionChange (val) {if (val.length > 1) {this.$refs.multipleTable.clearSelection()this.$refs.multipleTable.toggleRowSelection(val.pop())}},

原理:当勾选的数组长度大于1的时候删除前面一项 保持最后选的一项存在

nice!!!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。