Open zptime opened 3 years ago
<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>