Element-ui设置el-table表头全选框隐藏或禁用

Madge ·
更新时间:2024-09-20
· 928 次阅读

目录

需求:

方法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表头全选框隐藏或禁用内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网!



全选 element table

需要 登录 后方可回复, 如果你还没有账号请 注册新账号