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

 更新时间:2023年07月12日 11:24:50   作者:长相思979  
这篇文章主要给大家介绍了关于Element-ui设置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();
    },

 效果:

总结

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

相关文章

  • Vue中实现过渡动画效果实例详解

    Vue中实现过渡动画效果实例详解

    最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    这篇文章主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue之bus总线的简单使用解读

    vue之bus总线的简单使用解读

    这篇文章主要介绍了vue之bus总线的简单使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue.js添加一些触摸事件以及安装fastclick的实例

    vue.js添加一些触摸事件以及安装fastclick的实例

    今天小编就为大家分享一篇vue.js添加一些触摸事件以及安装fastclick的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue中在setup下如何使用自定义指令

    Vue中在setup下如何使用自定义指令

    这篇文章主要介绍了Vue中在setup下如何使用自定义指令,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue3中超好用的插件整理

    vue3中超好用的插件整理

    最近找到几个好用的插件,这里分享一下,下面这篇文章主要给大家介绍了关于vue3中超好用的插件整理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue实现点击隐藏与显示实例分享

    vue实现点击隐藏与显示实例分享

    在本篇文章中小编给大家分享了vue如何实现点击隐藏与显示的相关内容,有需要的朋友们跟着学习下。
    2019-02-02
  • 解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本

    解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,

    这篇文章主要给大家介绍了关于解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本的相关资料,这个报错是由于在系统上禁止运行脚本导致的,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • Vue数据驱动模拟实现5

    Vue数据驱动模拟实现5

    这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Vue.js实现价格计算器功能

    Vue.js实现价格计算器功能

    这篇文章主要为大家详细介绍了Vue.js实现价格计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论