elementUI实现表格多选中指定某些行不能被选中

今天项目中遇到一个需求,就是elementUI表格多选中需要符合要求的列才能被选中,否着该行不可选。

查看了下elementUI文档,找到了 selectable 属性:

在这里插入图片描述
该属性的意思就是,通过判断绑定方法的返回值是否为true来判断该行是否可选。接下来就根据文档的说明来编写代码就好了。

在选择列元素中添加该属性,如果表格中还未添加选择列则先添加:

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

定义方法:

judgeSelect(row,index){
    
    
	return row.data == 1 // 返回true该行可选,返回false则不可选
}

猜你喜欢

转载自blog.csdn.net/jiangjunyuan168/article/details/126651480