el-table表头全选框隐藏或禁用设置方法
作者：长相思979
有时候我们使用el-table的选择框时,如果涉及修改、删除时,可能一次只允许用户选择一条,这样的话如果使用顶部的全选复选框就不合适了,这篇文章主要给大家介绍了关于el-table表头全选框隐藏或禁用设置的相关资料,需要的朋友可以参考下
需求：
设置el-table表头的多选框隐藏或禁用，网上找的均造成即时生效，但刷新页面时页面会卡顿。
方法1：
直接使用css（scoped中）设置：
::v-deep .el-table__header-wrapper .el-checkbox {
// display: none;//设置不成功，页面卡顿
visibility: hidden;
}方法2：
给el-table设置表头属性header-cell-class-name
leftheaderStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return "seltAllbtnDis";
}
},css部分(scoped)：
::v-deep .seltAllbtnDis .cell {
visibility: hidden;
}以上2种方法可隐藏全选框，效果如下：
方法3：
使用el-table的select-all方法，此方法为设置全选框禁用，非隐藏
//禁用全选框
selectAll() {
this.$refs.MainTable.clearSelection();
},效果：
总结
到此这篇关于el-table表头全选框隐藏或禁用设置方法的文章就介绍到这了,更多相关el-table表头全选框隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！