如何在vue3中的element UI的tree组件中获取选中的数据及半选中节点数据 并将选中的数据组合成data格式的数据

在Vue3中使用Element UI的tree组件，可以通过以下步骤获取选中的数据及半选中节点数据并将选中的数据组合成data格式的数据：

1. 在tree组件中添加ref属性，命名为tree：

<el-tree ref="tree" :data="treeData" :props="treeProps" @check="handleCheck"></el-tree>

2. 在data中定义一个数组selectedData，用于存储选中的节点数据：

data() {
  return {
    treeData: [/* 树形数据 */],
    treeProps: {
      /* 树形属性配置 */
    },
    selectedData: [] // 存储选中的节点数据
  }
}

3. 在@check事件中获取选中的节点数据：

methods: {
  // 当选中节点发生变化时触发
  handleCheck(checkedNodes, checkedNode) {
    // 遍历所有选中节点
    this.selectedData = checkedNodes.map(node => {
      const { id, label } = node.data
      // 如果节点半选中，则需要将其子节点也加入到结果中
      if (node.indeterminate) {
        const children = node.childNodes.filter(child => child.checked)
        return { id, label, children: children.map(child => child.data.id) }
      }
      return { id, label }
    })
  }
}

4. 将选中的数据组合成data格式的数据：

// 获取树形数据和选中的数据
const treeData = this.$refs.tree.getCheckedNodes()
const selectedData = this.selectedData
// 将选中的数据组合成data格式的数据
const data = treeData.map(node => {
  const { id, label } = node.data
  // 如果节点半选中，则需要将其子节点也加入到结果中
  if (node.indeterminate) {
    const children = node.childNodes.filter(child => child.checked)
    return { id, label, children: children.map(child => child.data.id) }
  }
  // 如果节点被选中，则直接加入到结果中
  if (node.checked) {
    return { id, label }
  }
  // 如果节点未被选中，则不加入到结果中
  return null
}).filter(node => node !== null) // 过滤掉未被选中的节点
// 将选中的数据加入到结果中
data.push(...selectedData)
// 去重
const map = new Map()
data.forEach(item => map.set(item.id, item))
const result = Array.from(map.values())

这样就可以获取到选中的数据及半选中节点数据，并将其组合成data格式的数据了。