如何處理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設置為selection，代表多選。
selectable綁定的selectHandle()方法僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選，接下來只需要在selectHandle()方法中設置返回值就可以了
如下：
?? ?//在參數(shù)row中可以獲得這一行的數(shù)據(jù),index為這一行的下標,
?? ?//我的需求是禁用第一行,所以在index === 0 的時候,返回false即可
? ? selectHandle(row, index) {
? ? ? return !(index === 0);
? ? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue結(jié)合leaflet實現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實現(xiàn)克里金插值，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
Vue輸入框?qū)崟r驗證IP地址合法性并在下方進行提示功能實現(xiàn)
在Vue組件中的IP地址輸入框定義一個checkIpAddress方法,該方法使用正則表達式對傳入的IP地址進行驗證,這篇文章主要介紹了Vue輸入框?qū)崟r驗證IP地址合法性并在下方進行提示,需要的朋友可以參考下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的流程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在vue項目中,搜索功能是我們經(jīng)常需要使用的一個場景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue3過渡動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue3報錯‘defineProps‘?is?not?defined的解決方法
最近工作中遇到vue3中使用defineProps中報錯,飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報錯‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下2023-01-01
如何在Vue單頁面中進行業(yè)務數(shù)據(jù)的上報
為什么要在標題里加上一個業(yè)務數(shù)據(jù)的上報呢，因為在咱們前端項目中，可上報的數(shù)據(jù)維度太多，比如還有性能數(shù)據(jù)、頁面錯誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務數(shù)據(jù)的埋點。2021-05-05
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
python虛擬環(huán)境 virtualenv的簡單使用
virtualenv是一個創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡單使用，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01