import treeTransfer from "el-tree-transfer"; 全量树去除 选中的

 <template>
  <div>
    <tree-transfer
      :title="['源列表', '目标列表']"
      :from_data="fromData"
      :to_data="toData"
      :defaultProps="{label:'label'}"
      @add-btn="add"
      @remove-btn="remove"
      :mode="mode"
      height="540px"
      filter
      openAll
    ></tree-transfer>
  </div>
</template>

    <script>
import treeTransfer from "el-tree-transfer"; // 引入
export default {
  components: { treeTransfer }, // 注册
  data() {
    return {
      mode: "transfer", // transfer addressList
      check:[
    {
        "id": "1",
        "pid": 0,
        "label": "一级 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"
                    }
                ]
            }
        ]
    }
],
      fromData: [],
      resForm: [
        {
          id: "1",
          pid: 0,
          label: "一级 1",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "二级 1-1",
              // disabled: true,
              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",
                },
              ],
            },
          ],
        },
      ],
      toData: [],
    };
  },
  mounted(){
    // this.fromData=this.resForm
    this.toData=this.check
    this.handlea()
    // this.fromData=this.differenceTree()
  },
  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);
    },
    handlea(){
      const ids = [];
      function getIds(array) {
        for (let i = 0; i < array.length; i++) {
          const element = array[i];
          ids.push(element.id);
          if (element.children && element.children.length > 0) {
            getIds(element.children);
          }
        }
      }
      if (this.toData.length > 0) {
        getIds(JSON.parse(JSON.stringify(this.toData)));
        this.fromData = this.differenceTree(ids, JSON.parse(JSON.stringify(this.resForm)));
        console.log(this.fromData);
        return;
      }
    },
    //树过滤
    differenceTree(ids, arr) {
      const newarr = [];
      arr.forEach((element) => {
        if (ids.indexOf(element.id) == -1) {
          // 判断条件
          newarr.push(element);
        } else if (element.children && element.children.length > 0) {
          const redata = this.differenceTree(ids, element.children);
          if (redata && redata.length > 0) {
            const obj = {
              ...element,
              children: redata,
            };
            newarr.push(obj);
          }
        }
      });
      return newarr;
    },
  },
};
</script>

    <style>
</style>

原文地址：https://www.cnblogs.com/7c89/p/17360430.html