如何處理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+element+Java實(shí)現(xiàn)批量刪除功能
這篇文章主要介紹了vue+element+Java實(shí)現(xiàn)批量刪除功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue實(shí)現(xiàn)在data里引入相對(duì)路徑
這篇文章主要介紹了vue實(shí)現(xiàn)在data里引入相對(duì)路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue實(shí)現(xiàn)導(dǎo)出word文檔的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
最近公司在做一個(gè)基于vue開發(fā)的項(xiàng)目，項(xiàng)目需要開發(fā)一個(gè)展示組織架構(gòu)的樹組件，在網(wǎng)上搜了半天，沒(méi)有找到合適的，下面小編給大家分享一個(gè)基于Vue制作組織架構(gòu)樹組件，需要的朋友參考下吧2017-12-12
vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue項(xiàng)目設(shè)置活性字體過(guò)程(自適應(yīng)字體大小)
這篇文章主要介紹了vue項(xiàng)目設(shè)置活性字體過(guò)程(自適應(yīng)字體大小)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3中級(jí)指南之如何在vite中使用svg圖標(biāo)詳解
在以webpack為構(gòu)建工具的開發(fā)環(huán)境中我們可以很方便的實(shí)現(xiàn)SVG圖標(biāo)的組件化,下面這篇文章主要給大家介紹了關(guān)于Vue3中級(jí)指南之如何在vite中使用svg圖標(biāo)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
創(chuàng)建Vue3項(xiàng)目有兩種常見(jiàn)的方式,一種是想vue2版本一樣使用腳手架工具創(chuàng)建,創(chuàng)建vue3項(xiàng)目的腳手架必須是4版本以上的,另一種方法就是使用vite創(chuàng)建,這篇文章主要給大家介紹了關(guān)于如何使用vite創(chuàng)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-11-11