如何禁用Element-ui中el-table的表头全选框？

本文共计346个文字，预计阅读时间需要2分钟。

目录+需求+方法1：使用CSS（scoped中）设置+方法2：利用JavaScript控制+方法3：结合Vue的watch属性+总结+需求：设置el-table表头的多选框隐藏或禁用+设置：网上找到的均造成立即生效，但刷新页面时页面会卡顿+方法1：直接使用CSS设置+方法2：使用JavaScript动态控制+方法3：使用Vue的watch属性进行监控+总结

目录

• 需求：
• 方法1：
• 方法2：
• 方法3：
• 总结

需求：

设置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(); },

效果：

总结

到此这篇关于Element-ui设置el-table表头全选框隐藏或禁用的文章就介绍到这了,更多相关el-table表头全选框隐藏或禁用内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！