如何處理elementUI中表格多選框禁用的問題
更新時間：2022年09月24日 16:24:17 作者：lt要努力
這篇文章主要介紹了如何處理elementUI中表格多選框禁用的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
處理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()方法僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選，接下來只需要在selectHandle()方法中設(shè)置返回值就可以了
如下：
?? ?//在參數(shù)row中可以獲得這一行的數(shù)據(jù),index為這一行的下標(biāo),
?? ?//我的需求是禁用第一行,所以在index === 0 的時候,返回false即可
? ? selectHandle(row, index) {
? ? ? return !(index === 0);
? ? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element+Java實現(xiàn)批量刪除功能
這篇文章主要介紹了vue+element+Java實現(xiàn)批量刪除功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue實現(xiàn)在data里引入相對路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
最近公司在做一個基于vue開發(fā)的項目，項目需要開發(fā)一個展示組織架構(gòu)的樹組件，在網(wǎng)上搜了半天，沒有找到合適的，下面小編給大家分享一個基于Vue制作組織架構(gòu)樹組件，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強制刷新該路由組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目設(shè)置活性字體過程(自適應(yīng)字體大小)
這篇文章主要介紹了vue項目設(shè)置活性字體過程(自適應(yīng)字體大小)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3中級指南之如何在vite中使用svg圖標(biāo)詳解
在以webpack為構(gòu)建工具的開發(fā)環(huán)境中我們可以很方便的實現(xiàn)SVG圖標(biāo)的組件化,下面這篇文章主要給大家介紹了關(guān)于Vue3中級指南之如何在vite中使用svg圖標(biāo)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
創(chuàng)建Vue3項目有兩種常見的方式,一種是想vue2版本一樣使用腳手架工具創(chuàng)建,創(chuàng)建vue3項目的腳手架必須是4版本以上的,另一種方法就是使用vite創(chuàng)建,這篇文章主要給大家介紹了關(guān)于如何使用vite創(chuàng)建vue3項目的相關(guān)資料,需要的朋友可以參考下2022-11-11