tree相互控制是否能点击

最新推荐文章于 2024-11-02 08:58:20 发布

真的不想哇

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量188

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/xiaoHelloWord/article/details/130742227

版权

请添加图片描述

<template>
  <div style="display:flex">
    <div class="gujia_one">
      <el-tree :data="treeData1" default-expand-all ref="tree" node-key="id" :show-checkbox="true" el-tree="id"
        @check-change="handleCheckChange" :expand-on-click-node="false">
      </el-tree>
    </div>
    <div class="gujia">
      <el-tree ref="tree2" :data="treeData2" node-key="id" :default-expand-all="true" :expand-on-click-node="false"
        :show-checkbox="true" @check-change="handleCheckChange2">
      </el-tree>
    </div>
  </div>
</template>
<script>
  export default ({
    data() {
      return {
        treeData1: [{
            id: 1,
            label: '普通公寓',
            level: 'one',
            check: false,
            children: [{
              id: 3,
              label: '3.0基准价法',
              level: 'one',
              disabled: false,
              check: false

            }, {
              id: 2,
              label: '兼容估价法',
              level: '',
              disabled: false,
              check: false
            }]
          },
          {
            id: 4,
            label: '独栋别墅',
            level: 'one',
            check: false,
            children: [{
              id: 5,
              label: '3.0基准价法',
              level: 'one',
              disabled: false,
              check: false

            }, {
              id: 6,
              label: '兼容估价法',
              level: '',
              disabled: false,
              check: false
            }]
          }
        ],
        treeData2: [{
            id: 113,
            disabled: true,
            children: [{
              id: 13,
              label: '4.0股价法',
              disabled: false,
              level: 'one_men',
              check: false
            }, {
              id: 12,
              label: '案例估价法',
              disabled: false,
              level: '',
              check: false
            }]
          },
          {
            id: 1154,
            disabled: true,
            children: [{
              id: 4,
              label: '4.0股价法',
              disabled: false,
              level: 'one_men',
              check: false
            }, {
              id: 22,
              label: '案例估价法',
              disabled: false,
              level: '',
              check: false
            }]
          }
        ],
        inde: null
      }
    },
    methods: {

      handleCheckChange(data, checked) {
        const parentKey = this.$refs.tree.getNode(data).parent.key
        const parentNodeIndex = this.treeData1.findIndex(node => node.id === parentKey)
        this.treeData1.forEach(node => {
          const menu = node.children.find(child => child.id === data.id)
          if (!menu) {
            return
          }
          if (checked && data.level === 'one') {
            node.check = true
            menu.check = true
            this.treeData2[parentNodeIndex].children.forEach(child => {
              if (!child.disabled) {
                child.disabled = true
                const tree = this.$refs.tree2 // 获取 el-tree 实例对象，勾选3.0基准法的时候把，treeData2的树形取消勾选
                tree.setCheckedKeys([])
              }
            })
          } else {
            if (checked == false && data.level == 'one') {
              node.check = false
            }
            if (!node.check) {
              menu.check = false
              this.treeData2[parentNodeIndex].children.forEach(child => {
                if (child.disabled) {
                  child.disabled = false
                }
              })
            }
          }
        })
        console.log(this.$refs.tree.getCheckedNodes());//获取勾选中的对象可以取id值
      },
      handleCheckChange2(data, checked) {
        const parentKey = this.$refs.tree2.getNode(data).parent.key
        const parentIndex = this.treeData2.findIndex(node => node.id === parentKey)
        if (checked && parentIndex !== -1) {
          const targetChild = this.treeData1[parentIndex].children[0]
          if (data.level === 'one_men') {
            const targetMenu = this.treeData2[parentIndex].children.find(menu => menu.id === data.id)
            if (targetMenu) {
              targetMenu.checked = true
              targetChild.disabled = true
            }
          }
        } else if (!checked && parentIndex !== -1) {
          const targetChild = this.treeData1[parentIndex].children[0]
          const targetMenu = this.treeData2[parentIndex].children.find(menu => menu.id === data.id)
          if (targetMenu) {
            targetMenu.checked = false
            targetChild.disabled = false
          }
        }
      },
    }
  })
</script>