Element-ui設置el-table表頭全選框隱藏或禁用

目錄 需求： 方法1： 方法2： 方法3： 總結 需求： 設置el-table表頭的多選框隱藏或禁用，網上找的均造成即時生效，但刷新頁面時頁面會卡頓。 方法1： 直接使用css（scoped中）設置：

目錄

• 需求：
• 方法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表頭全選框隱藏或禁用內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！

【文章原創作者：韓國服務器 https://www.68idc.cn 歡迎留下您的寶貴建議】