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

这篇具有很好参考价值的文章主要介绍了设置el-table表头全选框隐藏或禁用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:设置el-table表头的多选框隐藏或禁用,网上找的均造成即时生效,但刷新页面时页面会卡顿。

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

 文章来源地址https://www.toymoban.com/news/detail-507981.html

方法1:

直接使用css(scoped中)设置:

::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//设置不成功,页面卡顿
  visibility: hidden;
}

方法2:

给el-table设置表头属性header-cell-class-name

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

leftheaderStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "seltAllbtnDis";
      }
    },

css部分(scoped):

::v-deep .seltAllbtnDis .cell {
    visibility: hidden;
  }

以上2种方法可隐藏全选框,效果如下:

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

 

 方法3:

使用el-table的select-all方法,此方法为设置全选框禁用,非隐藏

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

//禁用全选框
    selectAll() {
      this.$refs.MainTable.clearSelection();
    },

 效果:

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

 

到了这里,关于设置el-table表头全选框隐藏或禁用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-table中设置第一列为多选框,且多选框动态禁用

    给el-table第一列写成以下代码: 效果: 多选框动态禁用 el-table中设置了 type=\\\"selection\\\",但是由于部分数据是已经处理过的,不允许选中,但是其他的数据有可以多选的时候,我们需要动态的判断每一行的数据是否可以选中, type=\\\"selection\\\"时有这样一个属性: 所以我们只需要动态

    2024年01月18日
    浏览(30)
  • element-ui el-table表格勾选框条件禁用,及全勾选按钮禁用, 记录

    表格的部分内容是可以被勾选的,部分内容是不可以被勾选的 使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的 要求el-table表格中,部分内容不可以被勾选,全选框在没有可选内容时,是禁用状态 如上图所示,要求数据id是1或者2的数据不可被选择,当数据只剩下id为

    2024年01月22日
    浏览(38)
  • el-table 表头设置渐变色

     

    2024年02月15日
    浏览(39)
  • el-table表格设置——动态修改表头

    (1.1)使用el-popover,你需要修改的是 this.colOptions,colSelect : (1.2)js代码中的data (1.3)js中的methods (2.1)html代码 (2)js中的method写:

    2024年02月06日
    浏览(39)
  • el-table多选框设置默认选中,翻页保留选中状态

    最近碰到个需求,el-table列表渲染数据,要求有多选框并且附带默认选中,翻页后保留选中状态 写默认选中时百度一下还很简单,但是碰到个bug,第一次翻页可以保留,第二次翻页回来之后选中的就没了。 经过研究解决,记录一下,直接上代码了 默认选中只需要给table增加

    2024年02月14日
    浏览(43)
  • element ui - el-table 设置表头背景颜色和字体颜色

    在使用 elementui 中的 el-table 时,由于默认表格样式与设计稿不符,需要将表头的背景色和字体颜色设置为新颜色。 但是对 thead,thead tr,.el-table__cell 元素进行设置,都是无效的,查询了 elementui官网,发现需要使用 header-cell-style 属性。

    2024年02月12日
    浏览(62)
  • 【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号

            element plus中el-table采用的是el-scrollbar,无法采用全局默认滚动条样式修改,需要单独写公共样式。 原生滚动条样式 el-table滚动条样式 效果图:         el-table设置了自定义样式后,为el-table-column添加fixed=\\\"right\\\"属性,此时表格侧边栏固定列出现样式错乱,自定义

    2024年02月12日
    浏览(45)
  • VUE el-table设置表格表头居中,内容列居中/左对齐/右对齐

    1、 统一设置设置表头居中 加上【:header-cell-style=\\\"{\\\'text-align\\\':\\\'center\\\'}\\\"】 统一设置设置内容列居中 加上【:cell-style=\\\"{\\\'text-align\\\':\\\'center\\\'}\\\"】 2、 在每个el-table-column标签上边设置    align=\\\"center \\\"

    2024年02月17日
    浏览(36)
  • el-table 多选框改成单选框(el-table单选功能)

    今天,写项目时,有一个table作为筛选的载体,需要选中table里面的一条数据,我想了一下,用table里面的selection功能,实现单选功能。

    2024年02月16日
    浏览(35)
  • el-table纵向垂直表头

    参考:https://www.jianshu.com/p/1f38eaffd070

    2024年02月09日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包