当前位置: 首页 > article >正文

遍历递归数结构,修改里的disabled值

返回参数中新增字段 disabled,后端给的值为1和2,

disabled==1时,代表该节点需要置灰,不可选中

现在需要将disabled的值,改为布尔类型;

后端给的数结构是对象类型,tree接收数组类型;

先将对象类型的数据,遍历递归,修改里面的disabled值,最后再加[ ],改为数组类型.

this.setDisabledData(res.data.data);


    // 遍历递归
    setDisabledData(node) {
      let that = this;
      node.disabled == 1 ? (node.disabled = true) : (node.disabled = false);
      if (node.children && node.children.length > 0) {
        node.children.forEach(child => {
          that.setDisabledData(child);
        });
        node.children.every(child => {
          child.disabled == 1 ? (child.disabled = true) : (child.disabled = false);
        });
        this.assignerArr = [node];
      }
    },

            <el-form-item label="关键字" class="cx-scroll-wrap">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable></el-input>
              <div class="addScrollClass " :style="{ height: tableHeight }">
                <el-tree
                  icon-class="none"
                  :data="assignerArr"
                  :check-strictly="false"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  ref="tree"
                  :filter-node-method="filterNode"
                  highlight-current
                  :expand-on-click-node="false"
                  :props="props"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>
                      <i v-if="data.type == 2" class="el-icon-coin cx-icon"></i>
                      <i v-else class="el-icon-user-solid cx-icon"></i>
                      {{ node.label }}
                    </span>
                  </span>
                </el-tree>
              </div>
            </el-form-item>

      props: {
        label: "displayName",
        children: "children",
        isLeaf: "leaf",
        disabled: "disabled",
      },


http://www.kler.cn/news/327905.html

相关文章:

  • 【JVM】基础篇
  • 2024ICPC网络赛2记录:CK
  • 企业数字化转型指南:基于TOGAF框架的系统化战略解读
  • Junit 5 - 理解Mockito,提高UT 覆盖率
  • 景联文科技精准数据标注:优化智能标注平台,打造智能未来
  • LiveQing视频点播流媒体RTMP推流服务功能-支持电子放大拉框放大直播视频拉框放大录像视频流拉框放大电子放大
  • 【Redis技术进阶之路】「原理分析系列开篇」探索事件驱动枚型与数据特久化原理实现(数据持久化的实现AOF)
  • linux远程桌面:xrdp 安装失败
  • Android 长按文本弹出输入框
  • 《野蛮时代》数据分析项目实战——报告
  • 基于muduo库实现protobuf协议的通信详解
  • 叶绿素透射反射率与波长
  • pr2024安装包及新手入门讲解
  • Qt::WA_TranslucentBackground
  • 成都睿明智科技有限公司抖音开店怎么样?
  • 社交内容电商中的新机遇:2+1链动模式AI智能名片商城小程序
  • 10款好用的开源 HarmonyOS 工具库
  • 7-1.Android SQLite 之 SQLiteDatabase 简单编码模板(SQLiteDatabase 使用、SQL 语句编写)
  • 矩阵系统源码搭建的具体步骤,支持oem,源码搭建
  • Redis的基础通用命令
  • 3D Gaussian Splatting 学习笔记
  • VTK 与 OpenCV 的区别和各自的特点
  • 【笔记】X射线的衍射方向
  • golang学习笔记26-管道(Channel)【重要】
  • mock数据,不使用springboot的单元测试
  • 5G N2 N3 N6 NB口
  • C语言系列4——指针与数组(1)
  • 以矩阵的视角解多元一次方程组——矩阵消元
  • 需求6:如何写一个后端接口?
  • 使用JavaScript实现动态表格