下载
npm install el-tree-transfer --save
<tree-transfer :title="['模块（菜单）访问权限', '拥有的操作权限']":from_data='fromData':to_data='toData':defaultProps="{label:'label', children: 'children'}"@addBtn='add'@removeBtn='remove':mode='mode':pid="parentId":style="{height: '75%'}"filteropenAll></tree-transfer>
import treeTransfer from 'el-tree-transfer' export default {components:{ treeTransfer },data(){return{parentId: 'parentId',mode: "transfer",fromData: [{id: "1",parentId: 0,label: "房源综合业务管理平台",children: [{id: "1-1",parentId: "1",label: "首页",children: []},{id: "1-2",parentId: "1",label: "房源信息管理系统",children: [{id: "1-2-1",parentId: "1-2",children: [],label: "数据统计"},{id: "1-2-2",parentId: "1-2",children: [],label: "房源信息管理"},{id: "1-2-3",parentId: "1-2",children: [],label: "房源入库管理"}]}]}],toData:[]}},methods:{// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressListchangeMode() {if (this.mode == "transfer") {this.mode = "addressList";} else {this.mode = "transfer";}},// 监听穿梭框组件添加add(fromData,toData,obj){console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);},// 监听穿梭框组件移除remove(fromData,toData,obj){console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);}},}
注意：
1， 标题 类型：Array 必填：false 默认：[“源列表”, “目标列表”]
2，设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
3，源数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid！！！！！！！！
如果觉得《el-tree与el-transfer结合成树形穿梭框（tree-transfer）》对你有帮助，请点赞、收藏，并留下你的观点哦！
