el-tree-transfer穿梭框踩了的坑

下载

npm install el-tree-transfer --save

多个根节点案例（一个根节点就是官方案例，其实是一样的）

 <tree-transfer
     :from_data="fromData"
     :to_data="toData"
     :defaultProps="{ label: 'label' }"
     @add-btn="add"
     @remove-btn="remove"
     :mode="mode"
     height="540px"
     filter
     openAll
     >
</tree-transfer>

import treeTransfer from "el-tree-transfer"; // 引入
export default {
  data() {
    return {
      mode: "transfer", // transfer addressList
      fromData: [
        {
          id: "1",
          pid: 0,
          label: "一级 1",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "二级 1-1",
              children: [],
            },
            {
              id: "1-2",
              pid: "1",
              label: "二级 1-2",
              children: [
                {
                  id: "1-2-2",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-2",
                },
              ],
            },
          ],
        },
      ],
      toData: [
        {
          id: "1",
          pid: 0,
          label: "一级 1",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "二级 1-1",
              children: [],
            },
            {
              id: "1-2",
              pid: "1",
              label: "二级 1-2",
              children: [
                {
                  id: "1-2-1",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-1",
                },
                {
                  id: "1-2-2",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-2",
                },
              ],
            },
          ],
        },
        {
          id: "2",
          pid: 0,
          label: "一级 2",
          children: [
            {
              id: "2-1",
              pid: "2",
              label: "二级 2-1",
              children: [],
            },
            {
              id: "2-2",
              pid: "2",
              label: "二级 2-2",
              children: [
                {
                  id: "2-2-1",
                  pid: "2-2",
                  children: [],
                  label: "二级 2-2-1",
                },
                {
                  id: "2-2-2",
                  pid: "2-2",
                  children: [],
                  label: "二级 2-2-2",
                },
              ],
            },
          ],
        },
        {
          id: "3",
          pid: 0,
          label: "一级 3",
          children: [
            {
              id: "3-1",
              pid: "3",
              label: "二级 3-1",
              children: [],
            },
            {
              id: "3-2",
              pid: "3",
              label: "二级 3-2",
              children: [
                {
                  id: "3-2-1",
                  pid: "3-2",
                  children: [],
                  label: "二级 3-2-1",
                },
                {
                  id: "3-2-2",
                  pid: "3-2",
                  children: [],
                  label: "二级 3-2-2",
                },
              ],
            },
          ],
        },
      ],
    };
  },

 methods: {
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode() {
      if (this.mode == "transfer") {
        this.mode = "addressList";
      } else {
        this.mode = "transfer";
      }
    },
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的                
      {keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的 
      {keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
     getAddress() {
      this.fromData.forEach((item) => {
        //el-tree-transfer组件的第一个pid必须为0
        item.pid = 0;
      });
      this.toData.forEach((item) => {
        item.pid = 0;
      });

在参考了其他人的文档以后，我知道了根节点的pid必须是为0开头，但是他们没有说，这个必须是数字类型！后面的子节点的pid同父级的id。如果不是数据类型，就会出现大问题！在右侧数据并到左边的时候，会出现数据丢失等情况。所以就会有代码的后面一个getAddress()方法，来调整所有根节点的pid都设置为0，如果是死数据，可以把方法放在create进行调用，如果是通过接口获取数据，可以把方法放在获取到数据后进行调用。我因为一开始 ，没和后端同事协调好，他给的pid的字符串类型，结果出现了数据的移动丢失或多次渲染的情况。。 

 数据发生了丢失！

正是因为会出现如上问题，最好把id和pid的类型设为一致。如果id和pid的类型不一致，还会出现重复渲染并报如下错误

Duplicate keys detected: 'XXX'. This may cause an update error. 

所以~一定要和 后端同事进行协调，给的数据一定要是同一类型~找了半天bug不知道原因呜呜呜