element-ui多选表格禁用某一行不被选择问题
作者：将小宁
这篇文章主要介绍了element-ui多选表格禁用某一行不被选择问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element-ui多选表格禁用某一行不被选择
1.首先使用element-ui 的表格组件
具体代码如下
<el-table :data="tableData">
<el-table-column
type="selection"
:selectable="selectHandle"
label="多选"
align="center">
</el-table-column>
</el-table>其中tableData为绑定的表格数据，将表格第一列的type设置为selection，代表多选。
selectable绑定的selectHandle()方法仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选，接下来只需要在selectHandle()方法中设置返回值就可以了，
如下：
//在参数row中可以获得这一行的数据,index为这一行的下标,
//我的需求是禁用第一行,所以在index === 0 的时候,返回false即可
selectHandle(row, index) {
return !(index === 0);
},element-ui表格表头禁用全选功能
element-ui 貌似没有提供禁用全选的属性或者方法
所以只能我们自己动手来禁用全选了
第一种情况，直接不用显示全选按钮，那我们可以这么做
.el-table__header-wrapper .el-checkbox{//找到表头那一行，然后把里面的复选框隐藏掉
display:none
}
下面是效果图
element提供了一个全选的事件
select-all 当用户手动勾选全选 Checkbox 时触发的事件
所以我们要是想要它不能全选可以这么写
第二中利用全选方法，清除选择
<el-table ref="multipleTable" @select-all="onSelectAll">
</el-table>
<script>
methods: {
onSelectAll () {
this.$refs.multipleTable.clearSelection()//这个是清除所有选择项，当选择全部时，清除所有选择项
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。