脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → el-table表头全选框隐藏或禁用

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表头全选框隐藏或禁用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解Nuxt.js中使用Element-UI填坑

    详解Nuxt.js中使用Element-UI填坑

    这篇文章主要介绍了详解Nuxt.js中使用Element-UI填坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue3中使用@vueuse/core中的图片懒加载案例详解

    vue3中使用@vueuse/core中的图片懒加载案例详解

    这篇文章主要介绍了vue3中使用@vueuse/core中的图片懒加载案例,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-03-03
  • Windows系统下使用nginx部署vue2项目的全过程

    Windows系统下使用nginx部署vue2项目的全过程

    nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Ant Design的Table组件去除

    Ant Design的Table组件去除

    这篇文章主要介绍了Ant Design的Table组件去除“取消排序”选项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue-property-decorator用法详解

    vue-property-decorator用法详解

    这篇文章主要介绍了vue-property-decorator用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue项目中使用websocket的实现

    vue项目中使用websocket的实现

    本文主要介绍了vue项目中使用websocket的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue 里面的 $forceUpdate() 强制实例重新渲染操作

    vue 里面的 $forceUpdate() 强制实例重新渲染操作

    这篇文章主要介绍了vue 里面的 $forceUpdate() 强制实例重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 详解vue2如何处理xml格式的数据

    详解vue2如何处理xml格式的数据

    这篇文章主要为大家详细介绍了在vue2中如何处理xml格式的数据,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
    2024-03-03
  • VUE项目axios请求头更改Content-Type操作

    VUE项目axios请求头更改Content-Type操作

    这篇文章主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论