vue3+element Plus 左右树形结构之互搏

Jack__2017

于 2024-08-05 18:08:16 发布

阅读量266

点赞数 3

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/Jack__2017/article/details/140933385

版权

需求：选择左侧树形，右侧树形显示选择后的数据，右侧点击复选框后取消选择数据消失，且左侧取消勾选状态。

实现代码

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <!-- 树形控件1 -->
        <el-tree ref="tree" :data="treeData1" :props="defaultProps" :default-checked-keys="defaultCheckedKeys" show-checkbox @check="handleCheckChange" node-key="id" default-expand-all></el-tree>
      </el-col>
      <el-col :span="12"> <!-- 树形控件2 -->
        <el-tree ref="tree2" :data="treeData2" :props="defaultProps" :default-checked-keys="defaultCheckedKeys" @check-change="handleCheckChange2" show-checkbox node-key="id" default-expand-all></el-tree>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { ElTree } from 'element-plus';
const treeData1 = ref([
  { label: 'Node1', id: 1, children: [{ label: 'Child1', id: 2 }] },
  { label: 'Node2', id: 11, children: [{ label: 'Child2', id: 22 }] },
  {
    label: 'Node3',
    id: 111,
    children: [
      { label: 'Child3', id: 222 },
      { label: 'Child31', id: 223 },
    ],
  },
]);
const treeData2 = ref([]);
const tree = ref([]);
const tree2 = ref([]);
const defaultCheckedKeys = [222,223];
const defaultProps = {
  children: 'children',
  label: 'label',
};

const handleCheckChange = (data, checked, indeterminate) => {
  //重新获取树形控件2的选中数据
  treeData2.value = getCheckedNodes();
  // 树形控件2选中设置
  tree2.value.setCheckedKeys(tree.value.getCheckedKeys());
};
//树形控件2选中取消事件
const cancelCheck = (data, checked) => {
    // 遍历目标树形控件的所有节点，如果节点label与node相同，则取消选中
  const cancelNode = nodes => {
    nodes.forEach(node => {
      if (node.label === data.label) {
        //判断取消选中后，修改树形控件1的选中状态
        if (!checked) {
          tree.value.setChecked(node, false, false);
        }
      }
      if (node.children && node.children.length) {
        cancelNode(node.children);
      }
    });
  };
  cancelNode(treeData1.value);
};
//重新获取树形控件2的选中数据
const getCheckedNodes = function () {
  // 获取树形1的选中的节点
  const checkedNodes = tree.value.getCheckedNodes();
  const getTreeData = (nodes, checked) => {
    return nodes
      .map(node => ({
        ...node,
        children: getTreeData(node.children || [], checked),
      }))
      .filter(node => checked.includes(node.id) || (node.children && node.children.length));
  };
  const checkedTreeData = getTreeData(
    treeData1.value,
    checkedNodes.map(node => node.id)
  );
  return checkedTreeData;
};

// 树形控件2选中事件
const handleCheckChange2 = (data, checked, indeterminate) => {
  cancelCheck(data, checked);
  //点击取消后，重新设置树形控件2的数据，并通过树形1的选中状态设置树形2的选中状态
  nextTick(() => {
    treeData2.value = getCheckedNodes();
    tree2.value.setCheckedKeys(tree.value.getCheckedKeys());
  });
};
</script>