ElementUI 的tree结构实现目录的单选操作

最新推荐文章于 2024-06-18 10:14:03 发布

那就可爱多一点点

最新推荐文章于 2024-06-18 10:14:03 发布

阅读量848

点赞数

分类专栏： vue 文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/qq_37241934/article/details/127635725

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

demo的背景是一个树形结构，但是这个树形结构第一层只能单选，但是他的children可以多选值。

!](https://img-blog.csdnimg.cn/740d680d31c944f8be27c5871eb9dc31.png)

<template>
  <div class="detail-c">
     <z-tree :data="planTestOption" @check="disabledNode" show-checkbox node-key="id"> </z-tree>
  </div>
</template>
<script>
export default {
 data() {
    return {
      planOptions: {},
      planTestOption: []
    }
  },
  created() {
    const data = [
      {
        typeDesc: '普通测试计划',
        statusDesc: '进行中',
        testPlanStageVOList: [
          { testStage: 'SMOKE_TEST', testStageDesc: '冒烟测试' },
          { testStage: 'FUNCTIONAL_TEST', testStageDesc: '功能测试' },
          { testStage: 'ONLINE_SMOKE_TEST', testStageDesc: '线上冒烟测试' }
        ],
        testStrategyDesc: '自定义测试',
        testStrategy: 'ALLOW_EXIT_TEST',
        planName: '孙伟伟产品测试V1.73.0移动专项测试计划',
        type: 'TEST_PLAN',
        id: 'TP220922008003',
        status: 'IN_PROGRESS'
      },

      {
        typeDesc: '安全测试计划',
        statusDesc: '已完成',
        testPlanStageVOList: null,
        testStrategyDesc: '无策略',
        testStrategy: 'NULL_TEST',
        planName: '孙伟伟产品测试V1.96.0安全测试计划',
        type: 'SAFETY_TEST',
        id: 'TP221020008006',
        status: 'COMPLETED'
      },
      {
        typeDesc: '普通测试计划',
        statusDesc: '进行中',
        testPlanStageVOList: [
          { testStage: 'SMOKE_TEST', testStageDesc: '冒烟测试' },
          { testStage: 'FUNCTIONAL_TEST', testStageDesc: '功能测试' },
          { testStage: 'ONLINE_SMOKE_TEST', testStageDesc: '线上冒烟测试' }
        ],
        testStrategyDesc: '自定义测试',
        testStrategy: 'ALLOW_EXIT_TEST',
        planName: '孙伟伟产品测试V1.96.0测试计划',
        type: 'TEST_PLAN',
        id: 'TP221020008005',
        status: 'IN_PROGRESS'
      }
    ]
    for (const item of data) {
      item.value = item.id
      item.label = item.planName
      item.children = item.testPlanStageVOList
      for (const chid of item.children || []) {
        chid.value = chid.testStage
        chid.label = chid.testStageDesc
        chid.id = chid.testStage + '#' + item.id
      }
    }
    this.planTestOption = data
  },
  methods: {
    disabledNode(row, { checkedKeys }) {
      console.log(row, checkedKeys)
      let testPlanCode = checkedKeys.length && 'children' in row ? row.id : ''
      let testStage = checkedKeys
      if (testStage.includes(testPlanCode)) {
        if (testStage.length === 1) {
          testStage = []
        } else {
          testStage = testStage.filter(item => item != testPlanCode)
        }
      } else if (!testStage.includes(testPlanCode) && testStage.length) {
        const itemLen = this.planTestOption.length
        const len = testStage.length - 1
        for (let i = 0; i < itemLen; i++) {
          const children = this.planTestOption[i].children || []
          const childLen = children.length
          for (let j = 0; j < childLen; j++) {
            if (children[j].id == testStage[len]) {
              testPlanCode = this.planTestOption[i].id
              break
            }
          }
        }
      }
      this.planOptions.testStage = testStage
      this.planOptions.testPlanCode = testPlanCode
      console.log(testStage, testPlanCode)
      for (const item of this.planTestOption) {
        this.$set(item, 'disabled', checkedKeys.length ? item.id !== testPlanCode : false)
        if (item.children) {
          for (const child of item.children) {
            this.$set(child, 'disabled', checkedKeys.length ? item.id !== testPlanCode : false)
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-c {
  height: 200px;
  overflow-y: auto;
}
</style>