首页 > 其他 > 详细

ElementUI el-table 表格 行选择框改为单选

时间:2019-11-26 14:06:54      阅读:1862      评论:0      收藏:0      [点我收藏+]

首先,表格加一列

<el-table-column type="selection" width="55"></el-table-column>

然后,隐藏掉标头的全选全不选

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

给表格加一个 ref,例如:ref="Table" (加在el-table的属性里)
给表格加一个事件 @selection-change="chooseInstance"

chooseInstance (val) {
    if (val.length > 1) {
        this.$refs.Table.clearSelection()
        this.$refs.Table.toggleRowSelection(val.pop())
    } else {
    }
},

如果要实现点击表格的行就单选,再添一个 @current-change 事件:
在事件中:

currentChange(currentRow, oldCurrentRow) {
    this.$refs.Table.toggleRowSelection(currentRow)
}

ElementUI el-table 表格 行选择框改为单选

原文:https://www.cnblogs.com/wbyixx/p/11934719.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!