欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-07 20:10:34
...

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

首先把多选框先加上

<el-table-column type="selection" width="50" align="center"></el-table-column>

然后呢 要做单选那就把头部的全选区域隐藏掉

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

接着就是最重要的多选转单选了 其实就是每次点多选框的时候 取消上次勾选的 在 @selection-change 事件里:

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

不要忘记给table加上对应的ref值哦~

相关标签: vue vue.js