【element-ui】element tree 多个树形控件使用同一个数据时，添加插入children为什么不会同步？

Z时代
2024-01-10
分类：技术分享

我现在有两个对话框，一个为上传文件，一个是移动到，两个对话框都有tree，并且共用同一个treeData数据和新建文件夹方法，对话框里面分别有新建文件夹的方法，会在所点击的路径内添加children。

现在遇到的问题是，两个对话框共用同一数据，共用相同新建文件夹方法的情况下，新建文件夹永远都只会添加到第一个对话框，第二个对话框新建也会提示成功，但是添加的数据还是会跑到第一个对话框中。

如果不共用同一数据，只共用新建的方法时就不会出现第二个对话框新建文件夹时数据跑到第一个对话框的情况。

一直没弄明白到底是怎么回事？还请大神帮忙看看是什么原因。谢谢了
图片描述

图片描述

图片描述

补充内容：
各位大佬们看这张图应该就更好理解我说的意思了

回答：

<template>
  <div>
    <h1>Tree One</h1>
    <el-tree
      key="tree-one"
      ref="treeOne"
      :data="data"
      :props="defaultProps"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
    <h1>Tree Two</h1>
    <el-tree
      key="tree-two"
      ref="treeTwo"
      :data="data"
      :props="defaultProps"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
  </div>
</template>
<script>
let id = 1000
export default {
  data () {
    return {
      data: [
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1'
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2',
                  children: [
                    {
                      id: 11,
                      label: 'Level four 1-1-2-1'
                    },
                    {
                      id: 12,
                      label: 'Level four 1-1-2-2'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: 'Level one 2'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 自己手动同步数据，eval!!!!!
    /*
    append (data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
      // eval hack, nextTick is required
      this.$nextTick(() => {
        this.$refs.treeTwo.store.setData(this.data)
      })
    },
    */
    // 替换整个data
    append (node, data, store) {
      const treeOne = this.$refs.treeOne
      const treeTwo = this.$refs.treeTwo
      console.log('tree', treeOne, treeTwo, treeOne === treeTwo) // trees are different
      const storeOne = treeOne.store
      const storeTwo = treeTwo.store
      console.log('store', storeOne, storeTwo, storeOne === storeTwo) // stores are different
      const nodeOne = storeOne.getNode(data.id)
      const nodeTwo = storeTwo.getNode(data.id)
      console.log('node', nodeOne, nodeTwo,
        nodeOne === nodeTwo,
        nodeOne === node,
        nodeTwo === node
      ) // nodes are different
      const dataOne = nodeOne.data
      const dataTwo = nodeTwo.data
      console.log('data', dataOne, dataTwo,
        dataOne === dataTwo,
        dataOne === data,
        dataTwo === data
      ) // all true!!!
      // just replace all the data of two tree
      const newChild = { id: id++, label: 'testtest', children: [] }
      const traverse = node => {
        return {
          id: node.id,
          label: node.label,
          children: (node.children ? node.children.map(traverse) : []).concat(node.id === data.id ? [newChild] : [])
        }
      }
      const traversed = this.data.map(traverse)
      this.data = traversed
    },
    remove (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    renderContent (h, { node, data, store }) {
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
          <span>
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      )
    }
  }
}
</script>
<style lang="scss" scoped></style>