element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)詳解
問題總結(jié):
當(dāng)條件數(shù)據(jù)全被禁用時(shí),全選按鈕也變成禁用的狀態(tài),而不是隱藏。有會(huì)做的小伙伴希望跟帖。謝謝!
復(fù)選框框架:
通過調(diào)用selectable方法,進(jìn)行禁用復(fù)選框。
<!-- 復(fù)選框禁用 --> <el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" align="center" :selectable="selectable" /> <el-table-column label="編號(hào)" align="center" prop="studentId" />
1.指定行禁用:
//復(fù)選框禁用 selectable(row,rowIndex) { //索引是從0開始,條件1是指只有第2行數(shù)據(jù)不被禁用 if(rowIndex == 1){ return true; //不禁用 }else { return false; //禁用 } }
效果:
2.條件禁用:
//復(fù)選框禁用 selectable(row,rowIndex) { //只有姓名【zhang】不被禁用 if (row.studentName == "zhang") { return true; //不禁用 }else { return false; //禁用 } }
效果:
問題點(diǎn):當(dāng)條件數(shù)據(jù)全被禁用時(shí),全選按鈕不是禁用的狀態(tài)。
//復(fù)選框全部禁用 selectable(row,rowIndex) { return false; }
效果:
復(fù)選框全被禁用時(shí),全選按鈕將被隱藏
回避做法:
加了一個(gè):header-cell-class-name屬性,通過調(diào)用cellClass方法,當(dāng)全被禁用時(shí),全選按鈕將被隱藏。
<!-- 復(fù)選框禁用 --> <el-table v-loading="loading" :data="studentList" :header-cell-class-name="cellClass" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" align="center" :selectable="selectable" /> <el-table-column label="編號(hào)" align="center" prop="studentId" />
實(shí)現(xiàn):
定義一個(gè)參數(shù)DisableSelection:true,實(shí)現(xiàn)全選禁用。
export default { name: "Student", data() { return { // 全選按鈕隱藏 DisableSelection:true, } } }
追加全選按鈕的隱藏樣式:
<style> .el-table .DisableSelection .cell .el-checkbox__inner{ display: none; position: relative; } .el-table .DisableSelection .cell:before{ content: ""; position: absolute; } </style>
追加全選按鈕隱藏函數(shù)cellClass,啟用隱藏樣式:
//全選按鈕隱藏 cellClass(row){ row.length console.log(row) if(this.DisableSelection){ if (row.columnIndex === 0) { return 'DisableSelection' } } },
復(fù)選框當(dāng)存在不禁用時(shí),重置DisableSelection屬性值:
//復(fù)選框禁用 selectable(row,rowIndex) { //所有行都被禁用 if(rowIndex < 0){ this.DisableSelection = false && this.DisableSelection; return true; //不禁用 }else { return false; //禁用 } },
效果:全被禁用時(shí),全選按鈕被隱藏
存在可選按鈕場合:前兩行可選。
//復(fù)選框禁用 selectable(row,rowIndex) { //前兩行可選的狀態(tài) if(rowIndex < 2){ this.DisableSelection = false && this.DisableSelection; return true; //不禁用 }else { return false; //禁用 } },
當(dāng)存在可選時(shí),全選按鈕被表示出來
問題總結(jié):
當(dāng)條件數(shù)據(jù)全被禁用時(shí),全選按鈕也變成禁用的狀態(tài),而不是隱藏。
總結(jié)
到此這篇關(guān)于element-ui table使用type='selection'復(fù)選框全禁用(全選禁用)的文章就介紹到這了,更多相關(guān)element-ui table復(fù)選框全禁用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟,項(xiàng)目中經(jīng)常有中英文切換的功能,接下來就簡單實(shí)現(xiàn)以下這個(gè)功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考2023-11-11詳解swiper在vue中的應(yīng)用(以3.0為例)
這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09vue插件draggable實(shí)現(xiàn)拖拽移動(dòng)圖片順序
這篇文章主要為大家詳細(xì)介紹了vue插件draggable實(shí)現(xiàn)拖拽移動(dòng)圖片順序,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程
這篇文章主要介紹了關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
localStorage沒有時(shí)間期限,除非將它移除,sessionStorage即會(huì)話,當(dāng)瀏覽器關(guān)閉時(shí)會(huì)話結(jié)束,有時(shí)間期限,具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,需要的朋友可以參考下2018-04-04使用 JSON.stringify() 列化一個(gè)Error
這篇文章主要介紹了使用 JSON.stringify() 列化一個(gè)Error,需要的朋友可以參考下2023-10-10Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn)
一個(gè)好的項(xiàng)目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02