vue + element 项目中，表格多选状态如何禁选

最新推荐文章于 2024-01-16 14:40:11 发布

原创最新推荐文章于 2024-01-16 14:40:11 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

elementUI

6 篇文章

订阅专栏

本文介绍如何在Vue结合ElementUI的项目中，根据业务需求动态控制table表格中多选框的可选与禁选状态。通过在<el-table-column>上添加selectable属性并配合methods中的判断函数，实现对特定状态行的多选框禁用。

vue + element 项目中，表格多选状态如何禁选

一、应用情景

因需求，要对elementUI中table表格的多选框进行 可勾选 和 不可勾选 的处理

二、具体步骤

1. 给 type 属性为 selection 的<el-table-column />加一个事件 :selectable='selectInit’

 <el-table-column
        type="selection"
         :selectable='selectInit'
         width="55">
 </el-table-column>

在这里插入图片描述
2. 在methods中添加事件

methods: {
            /**
             *  判断是否可回收
             */
            selectInit(row, index) {
                if (row.status == 2 || row.status == 6 || row.status == 9) {
                    return true; //可勾选
                }else {
                    return false//不可勾选
                }
            },
}

在这里插入图片描述