vue项目 : 解决element-ui多选框如何禁用的问题

qq_45867474

已于 2022-01-25 10:27:40 修改

阅读量1.7k

点赞数 1

文章标签： ui elementui vue.js

于 2021-12-14 14:19:11 首次发布

本文链接：https://blog.csdn.net/qq_45867474/article/details/121926012

版权

本文介绍了如何在前端开发中，特别是在使用组件库时，根据数据动态控制表格多选框的可用性。通过设置`<el-table-column>`的`selectable`属性，并结合`selectEnable`方法判断行数据，实现了当某列数据满足特定条件（如为空）时，才允许选择多选框的功能。这一解决方案有助于提升用户体验，确保用户只能在符合条件的情况下进行操作。

摘要由CSDN通过智能技术生成

一、问题描述

使用了组件库中的表格多选框，<el-tabel-column>的type为selection，要根据当前行的是否存在某个需要判定的数据来决定当前行的多选框按钮是否可用

二、解决方法

在组件库中我们找到了相关属性（仅适用于type=selection）：

三、使用案例

模板代码

<el-table v-loading="loading"
          :data="tableData"
          :header-cell-style="headerCellStyle"
          @selection-change="getInfo">
                <el-table-column
                    type="selection"
                    :selectable="selectEnable">
                </el-table-column>
</el-table>

js代码(写在methods中)

selectEnable(row) {
            if (row.realExitDateStr) {
                return false
            } else {
                return true
            }
        }

达到的效果：