单树穿梭框SingleTreeTransfer（实例演示）

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

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

export default {
  data() {
    return {
      provinceData: [],
      targetKeys: [],
    };
  },
  components: {
    SingleTreeTransfer,
  },
  created() {
    this.provinceData = treeTransFn(proviceList);
    console.log(this.provinceData);
  },
  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

单树穿梭框SingleTreeTransfer（实例演示） #5
