处理 elementUI 中表格多选框禁用问题

最新推荐文章于 2024-04-16 15:39:13 发布

原创最新推荐文章于 2024-04-16 15:39:13 发布 · 7.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#element中表格多选框禁用 #vue中表格多选框禁用问题 #表格多选框的禁用问题

使用UI库时遇上的那些事～专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在el-table-column的selection类型中使用selectable属性，通过selectEnable方法实现对行选择的禁用。该方法检查当前行ID是否在enabelIds数组中，若存在则禁止选择。

在 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="选择产品" align="center" width="350">
   </el-table-column>
</el-table>

方法函数

selectEnable(row, rowIndex) {
      if (this.enabelIds.some(item => item === row.id)) {
        return false
      } else {
        return true// 不禁用
      }
    }