快捷導(dǎo)航

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

更新時(shí)間：2023年07月12日 11:24:50 作者：長(zhǎng)相思979

這篇文章主要給大家介紹了關(guān)于Element-ui設(shè)置el-table表頭全選框隱藏或禁用的相關(guān)資料,文中手把手教你實(shí)現(xiàn)el-table實(shí)現(xiàn)跨表格禁用選項(xiàng),需要的朋友可以參考下

需求：

設(shè)置el-table表頭的多選框隱藏或禁用，網(wǎng)上找的均造成即時(shí)生效，但刷新頁(yè)面時(shí)頁(yè)面會(huì)卡頓。

方法1：

直接使用css（scoped中）設(shè)置：

::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//設(shè)置不成功，頁(yè)面卡頓
  visibility: hidden;
}

方法2：

給el-table設(shè)置表頭屬性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方法，此方法為設(shè)置全選框禁用，非隱藏

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

效果：

總結(jié)

到此這篇關(guān)于Element-ui設(shè)置el-table表頭全選框隱藏或禁用的文章就介紹到這了,更多相關(guān)el-table表頭全選框隱藏或禁用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解Nuxt.js中使用Element-UI填坑
這篇文章主要介紹了詳解Nuxt.js中使用Element-UI填坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue3中使用@vueuse/core中的圖片懶加載案例詳解
這篇文章主要介紹了vue3中使用@vueuse/core中的圖片懶加載案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-03-03
Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的全過(guò)程
nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器,因此常用來(lái)做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Ant Design的Table組件去除
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
vue-property-decorator用法詳解
這篇文章主要介紹了vue-property-decorator用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue項(xiàng)目中使用websocket的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中使用websocket的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作
這篇文章主要介紹了vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
詳解vue2如何處理xml格式的數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了在vue2中如何處理xml格式的數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2024-03-03
VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作
這篇文章主要介紹了VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07