如何處理elementUI中表格多選框禁用的問(wèn)題
更新時(shí)間：2022年09月24日 16:24:17 作者：lt要努力
這篇文章主要介紹了如何處理elementUI中表格多選框禁用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
處理elementUI中表格多選框禁用
在 el-table-column type 類型為 selection 組件中，添加 :selectable='方法名'
<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSelectionLeftChange"> ? ?<el-table-column type="selection" width="50" :selectable='selectEnable'> ? ?</el-table-column> ? ?<el-table-column prop="appName" label="選擇產(chǎn)品" align="center" width="350"> ? ?</el-table-column> </el-table>
方法函數(shù)
selectEnable(row, rowIndex) {
? ? ? if (this.enabelIds.some(item => item === row.id)) {
? ? ? ? return false
? ? ? } else {
? ? ? ? return true// 不禁用
? ? ? }
? ? }elementUI多選表格禁用某一行不被選擇
首先使用element-ui 的表格組件
具體代碼如下
? ? <el-table :data="tableData"> ? ? ?? ?<el-table-column? ? ? ?? ??? ?type="selection"? ? ? ?? ??? ?:selectable="selectHandle"? ? ? ?? ??? ?label="多選"? ? ? ?? ??? ?align="center">?? ??? ??? ??? ? ??? ??? ? ? ? ?? ?</el-table-column> ? ? </el-table>
其中tableData為綁定的表格數(shù)據(jù)，將表格第一列的type設(shè)置為selection，代表多選。
selectable綁定的selectHandle()方法僅對(duì) type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來(lái)決定這一行的 CheckBox 是否可以勾選，接下來(lái)只需要在selectHandle()方法中設(shè)置返回值就可以了
如下：
?? ?//在參數(shù)row中可以獲得這一行的數(shù)據(jù),index為這一行的下標(biāo),
?? ?//我的需求是禁用第一行,所以在index === 0 的時(shí)候,返回false即可
? ? selectHandle(row, index) {
? ? ? return !(index === 0);
? ? },以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示功能實(shí)現(xiàn)
在Vue組件中的IP地址輸入框定義一個(gè)checkIpAddress方法,該方法使用正則表達(dá)式對(duì)傳入的IP地址進(jìn)行驗(yàn)證,這篇文章主要介紹了Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示,需要的朋友可以參考下2024-06-06
vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法
在父組件 App.vue 中引用子組件 A.vue，把 name 的值傳給 A 組件。這篇文章主要介紹了vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法,需要的朋友可以參考下2018-01-01
vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue關(guān)鍵字搜索功能實(shí)戰(zhàn)小案例
在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue3過(guò)渡動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法
最近工作中遇到vue3中使用defineProps中報(bào)錯(cuò),飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下2023-01-01
如何在Vue單頁(yè)面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)
為什么要在標(biāo)題里加上一個(gè)業(yè)務(wù)數(shù)據(jù)的上報(bào)呢，因?yàn)樵谠蹅兦岸隧?xiàng)目中，可上報(bào)的數(shù)據(jù)維度太多，比如還有性能數(shù)據(jù)、頁(yè)面錯(cuò)誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務(wù)數(shù)據(jù)的埋點(diǎn)。2021-05-05
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
python虛擬環(huán)境 virtualenv的簡(jiǎn)單使用
virtualenv是一個(gè)創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡(jiǎn)單使用，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01