el-table表头全选框隐藏或禁用设置方法
更新时间：2023年09月14日 09:54:19 作者：长相思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表头全选框隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
在我们开发项目中,特别是流程审批类的项目,最后一步会提交审核,审核员看完相应信息以后,没问题就会签字通过审批,这篇文章主要给大家介绍了关于VUE签字组件vue-esign安装使用的相关资料,需要的朋友可以参考下2023-09-09
在Vue.js开发中,经常会遇到需要展示搜索和列表的需求,为了提高代码复用性和开发效率,我们可以封装一个可配置的搜索列表组件,下面我们就来讲讲如何实现这样一个组件吧2023-08-08
这篇文章主要介绍了关于Vue实现组件信息的缓存问题的相关资料,需要的朋友可以参考下2017-08-08
在vue中路由使用this.$router.go(-1)返回两次问题
这篇文章主要介绍了在vue中路由使用this.$router.go(-1)返回两次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
增删改查是我们写项目百分之七十会遇到的代码,下面这篇文章主要给大家介绍了关于vue前端实现表格数据增查改删功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
本文主要介绍了Vue中textarea自适应高度方案的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
本文主要介绍了vue中process.env的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了vue filter的四种用法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目开启Gzip压缩和性能优化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue中rules的写法使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
最新评论