JS递归禁用tree本级及子孙级

最新推荐文章于 2024-07-30 10:56:44 发布

你怎么瘦的像条狗一样

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量221

点赞数 2

分类专栏： VUE 文章标签： javascript 前端开发语言 vue.js elementui

本文链接：https://blog.csdn.net/qq_37739698/article/details/137273662

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主方法：

/**
     * @ item： 机构树的数据
     * @ state：是否禁用的转态
     * @ this.defaultValue: 需要禁用的节点ID
     ************************************/
    init (item, state) {
      item.forEach(x => {
        // 满足条件
        if (x.id === this.defaultValue || state) {
          this.$set(x, 'disabled', true)
          if (x.child && x.child.length) {
            this.init(x.child, true)
          }
          return
        }
        // 不满足条件
        this.$set(x, 'disabled', false)
        if (x.child && x.child.length) {
          this.init(x.child, false)
        }
      })
    }

完整代码：

<template>
  <div class="home">
    <el-input v-model="defaultValue" placeholder="请输入内容" style="margin-bottom: 30px;"></el-input>
    <el-tree :data="data" :props="defaultProps" show-checkbox node-key="id" default-expand-all></el-tree>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      data: [
        {
          "id": "1772917371990241282",
          "name": "海南省",
          "parentId": null,
          "creatorId": "admin",
          "catalogue": "label",
          "createTime": "2024-03-27 17:23:35",
          "count": "0",
          "child": [
            {
              "id": "1772917598923059202",
              "name": "海口市",
              "parentId": "1772917371990241282",
              "creatorId": "admin",
              "catalogue": "label",
              "createTime": "2024-03-27 17:24:29",
              "count": "1",
              "child": [
                {
                  "id": "1772917766711996418",
                  "name": "秀英区",
                  "parentId": "1772917598923059202",
                  "creatorId": "admin",
                  "catalogue": "label",
                  "createTime": "2024-03-27 17:25:09",
                  "count": "0",
                  "child": [
                    {
                      "id": "1772918158208331778",
                      "name": "东山镇",
                      "parentId": "1772917766711996418",
                      "creatorId": "admin",
                      "catalogue": "label",
                      "createTime": "2024-03-27 17:26:43",
                      "count": "0",
                      "child": []
                    },
                    {
                      "id": "1772918200059097090",
                      "name": "永兴镇",
                      "parentId": "1772917766711996418",
                      "creatorId": "admin",
                      "catalogue": "label",
                      "createTime": "2024-03-27 17:26:53",
                      "count": "0",
                      "child": []
                    },
                    {
                      "id": "1772918302081347586",
                      "name": "遵谭镇",
                      "parentId": "1772917766711996418",
                      "creatorId": "admin",
                      "catalogue": "label",
                      "createTime": "2024-03-27 17:27:17",
                      "count": "1",
                      "child": []
                    }
                  ]
                },
                {
                  "id": "1772917790862798849",
                  "name": "龙华区",
                  "parentId": "1772917598923059202",
                  "creatorId": "admin",
                  "catalogue": "label",
                  "createTime": "2024-03-27 17:25:15",
                  "count": "0",
                  "child": []
                },
                {
                  "id": "1772917816104120322",
                  "name": "美兰区",
                  "parentId": "1772917598923059202",
                  "creatorId": "admin",
                  "catalogue": "label",
                  "createTime": "2024-03-27 17:25:21",
                  "count": "0",
                  "child": []
                },
                {
                  "id": "1772917847217467394",
                  "name": "琼山区",
                  "parentId": "1772917598923059202",
                  "creatorId": "admin",
                  "catalogue": "label",
                  "createTime": "2024-03-27 17:25:29",
                  "count": "1",
                  "child": []
                }
              ]
            },
            {
              "id": "1772917681890586626",
              "name": "三亚市",
              "parentId": "1772917371990241282",
              "creatorId": "admin",
              "catalogue": "label",
              "createTime": "2024-03-27 17:24:49",
              "count": "0",
              "child": []
            }
          ]
        },
        {
          "id": "1774694923257942018",
          "name": "广东省",
          "parentId": null,
          "creatorId": "admin",
          "catalogue": "label",
          "createTime": "2024-04-01 15:06:57",
          "count": "0",
          "child": []
        }
      ],
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      defaultValue: '1772918158208331778'
    }
  },
  watch: {
    defaultValue () {
      this.init(this.data, false)
    }
  },
  mounted() {
    this.init(this.data, false)
  },
  methods: {
    /**
     * @ item： 机构树的数据
     * @ state：是否禁用的转态
     * @ this.defaultValue: 需要禁用的节点ID
     ************************************/
    init (item, state) {
      item.forEach(x => {
        // 满足条件
        if (x.id === this.defaultValue || state) {
          this.$set(x, 'disabled', true)
          if (x.child && x.child.length) {
            this.init(x.child, true)
          }
          return
        }
        // 不满足条件
        this.$set(x, 'disabled', false)
        if (x.child && x.child.length) {
          this.init(x.child, false)
        }
      })
    },
  }
}
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
}
</style>