双树穿梭框TreeTransfer（实例演示）

<template>
  <div class="demo-block" style="width: 526px">
    <div class="demo-block-title">功能点：</div>
    <div class="demo-block-content">
      <tree-transfer
        class="m-transfer"
        ref="treeTransfer"
        :dataSource="provinceData"
        :targetKey="targetKeys"
        @handleChange="handleTreeTransfer"
      />
    </div>
  </div>
</template>

<script>
import * as R from "ramda";
import { proviceList, filterSourceTree, filterTargetTree, treeTransFn } from "./treeUtils";
import TreeTransfer from "transfer/tree-transfer.vue";

export default {
  data() {
    return {
      provinceData: [],
      targetKeys: [],
    };
  },
  components: {
    TreeTransfer,
  },
  created() {
      this.provinceData = treeTransFn(proviceList);
      // 1. 源数据过滤处理
      let leftSource = filterSourceTree(
        this.provinceData,
        ["1001", "1020", "1201"],
        "",
        this.replaceFields
      );
      console.log(leftSource);
      this.provinceData = leftSource;

      // 2. 目标数据处理
      let rightSource = filterTargetTree(
        this.provinceData,
        ["1001", "1020", "1201"],
        "",
        this.replaceFields
      );
      console.log(rightSource);
      this.provinceData = rightSource;
  },
  methods: {
    handleTreeTransfer(sData, tData, targetKeys) {
      // sData：源数据；tData-目标数据；targetKeys-选中key集合
      this.selectedProvinceData = tData;
    },
  },
};
</script>

<style lang="scss">
.m-transfer {
  width: 600px;
  .ant-transfer-list-content,
  .mcd-tree {
    height: 400px;
  }
}
</style>
zptime / blog

双树穿梭框TreeTransfer（实例演示） #7
