根据接口返回字段判断el-tree的复选框是否禁选

weixin_46302624

已于 2022-07-18 10:32:51 修改

阅读量758

点赞数

分类专栏： el-tree vue 文章标签： elementui vue.js 前端

于 2022-07-18 10:29:06 首次发布

本文链接：https://blog.csdn.net/weixin_46302624/article/details/125842764

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

el-tree

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Element UI的el-tree树结构中，通过自定义disabled属性，根据后端接口数据判断节点是否禁选。通过`filterDeviceNode`和`handleCheckChange`回调函数，实现实时节点状态控制。

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

el-tree树结构：

  <el-tree
                class="device-tree"
                :data="deviceData"
                node-key="id"
                :props="defaultDeviceProps"
                default-expand-all
                :filter-node-method="filterDeviceNode"
                ref="deviceTree"
                show-checkbox
                :expand-on-click-node="false"
                @check-change="handleCheckChange"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span :title="node.label" class="show-ellipsis">{{ node.label }}</span>
                </span>
              </el-tree>

在defaultDeviceProps配置disabled项。参考官网：

回调函数return布尔值，true是禁选，false是不禁选，通过data就可以拿到后端接口返回字段

代码实现：

 defaultDeviceProps: {
        children: 'children',
        label: 'label',
        disabled: (data, node) => {
          //先判断该设备是否已存在于该分组的下级设备里，如果存在则设置为禁选
          let obj = this.subEquipmentList.find(item => {
            return item.equipmentId == data.id && data.device
          })
          //根据接口字段device判断该节点是否是设备，如果device是false就不是设备，就将该节点设置为禁选，如果是设备就不禁选
          return obj ? true : !data.device
        }
      }

页面效果：