Ant Design Vue中如何实现省市穿梭框(ant design,vue,编程语言)

树形穿梭框

官方树穿梭框如下，左右是树结构，右边是列表。

本质上是有两套数据源，tree 使用的是树状数据源，transfer 使用的是列表数据源，将多维的树状数据源转为一维的，就是列表数据了。

具体使用可以查看官方文档之 带搜索框的穿梭框（https://antdv.com/components/transfer-cn/）

城市穿梭框

改造穿梭框的原因：

• targetKeys只需要城市数据，不需要省份数据

• 源穿梭框中，子节点和父节点没有关联选中关系，需要处理，毕竟省市级是需要联动的

• 目标穿梭框，也要支持树状结构

主要实现功能点：

• 树形结构数据处理：关键词过滤；已选数据禁用状态；

• 实现父节点和节点的关联选中

• 穿梭框右侧仅展示城市数据，不显示省份数据

• 选中城市数据：带省级信息返回，满足接口要求，即返回树状结构

改造的本质：基于transfer的二次改造，主要是对数据的处理，组件基本没啥改变

组件参数和事件

自定义参数：考虑对外暴露的参数，参数的作用，属性等自定义事件：考虑暴露出去的回调事件

//自定义参数exportdefault{props:{dataSource:{//数据源type:Array,default:()=>[],},targetKey:{//右侧框数据的key集合type:Array,default:()=>[],},},};//handleChange回调函数：treeData-左侧树结构数据，toArray-右侧树结构数据，targetKeys-选中城市key集合this.$emit("handleChange",this.treeData,toArray,this.targetKeys);

穿梭框处理

<template><!--穿梭框组件，数据源为列表形式--><a-transferclass="mcd-transfer"ref="singleTreeTransfer"show-search:locale="localeConfig":titles="['所有城市','已选城市']":data-source="transferDataSource":target-keys="targetKeys":render="(item)=>item.label":show-select-all="true"@change="handleTransferChange"@search="handleTransferSearch"><templateslot="children"slot-scope="{props:{direction,selectedKeys},on:{itemSelect,itemSelectAll},}"><!--左边源数据框：树形控件--><a-treev-if="direction==='left'"class="mcd-tree"blockNodecheckable:checked-keys="[...selectedKeys,...targetKeys]":expanded-keys="expandedKeys":tree-data="treeData"@expand="handleTreeExpanded"@check="(_,props)=>{handleTreeChecked(_,props,[...selectedKeys,...targetKeys],itemSelect,itemSelectAll);}"@select="(_,props)=>{handleTreeChecked(_,props,[...selectedKeys,...targetKeys],itemSelect,itemSelectAll);}"/></template></a-transfer></template>

数据源处理

• 穿梭框数据处理（transferDataSource）：多维数据转为一维数据

• 树数据处理（treeData）：数据源过滤处理，数据禁止操作处理

//数据源示例constdataSource=[{pid:"0",key:"1000",label:"黑龙江省",title:"黑龙江省",children:[{pid:"1000",key:"1028",label:"大兴安岭地区",title:"大兴安岭地区",},],},];//ant-transfer穿梭框数据源transferDataSource(){//穿梭框数据源lettransferDataSource=[];//穿梭框数据转换，多维转为一维functionflatten(list=[]){list.forEach((item)=>{transferDataSource.push(item);//子数据处理if(item.children&&item.children.length){flatten(item.children);}});}if(this.dataSource&&this.dataSource.length){flatten(JSON.parse(JSON.stringify(this.dataSource)));}returntransferDataSource;}//ant-tree树数据源treeData(){//树形控件数据源constvalidate=(node,map)=>{//数据过滤处理includesreturnnode.title.includes(this.keyword);};constresult=filterTree(this.dataSource,this.targetKeys,validate,this.keyword);returnresult;}//树形结构数据过滤constfilterTree=(tree=[],targetKeys=[],validate=()=>{})=>{if(!tree.length){return[];}constresult=[];for(letitemoftree){if(item.children&&item.children.length){letnode={...item,children:[],disabled:targetKeys.includes(item.key),//禁用属性};//子级处理for(letoofitem.children){if(!validate.apply(null,[o,targetKeys]))continue;node.children.push({...o,disabled:targetKeys.includes(o.key)});}if(node.children.length){result.push(node);}}}returnresult;};

穿梭框事件处理

• change 事件，回调数据（handleTransferChange）

• search 搜索事件（handleTransferSearch）

//穿梭框：change事件handleTransferChange(targetKeys,direction,moveKeys){//过滤：避免头部操作栏“全选”将省级key选中至右边this.targetKeys=targetKeys.filter((o)=>!this.pidKeys.includes(o));//选中城市数据：带省级信息返回，满足接口要求constvalidate=(node,map)=>{returnmap.includes(node.key)&&node.title.includes(this.keyword);};lettoArray=filterTree(this.dataSource,this.targetKeys,validate);//handleChange回调函数：treeData-左侧树结构数据，toArray-右侧树结构数据，targetKeys-选中城市key集合this.$emit("handleChange",this.treeData,toArray,this.targetKeys);},//穿梭框：搜索事件handleTransferSearch(dir,value){if(dir==="left"){this.keyword=value;}},

树事件

• change 事件，处理父节点和子节点的联动关系（handleTreeChecked）

• expand 事件：树的展开和收缩（handleTreeExpanded）

//树形控件：change事件handleTreeChecked(keys,e,checkedKeys,itemSelect,itemSelectAll){const{eventKey,checked,dataRef:{children},}=e.node;if(this.pidKeys&&this.pidKeys.includes(eventKey)){//父节点选中：将所有子节点也选中letchildKeys=children?children.map((item)=>item.key):[];if(childKeys.length)itemSelectAll(childKeys,!checked);}itemSelect(eventKey,!isChecked(checkedKeys,eventKey));//子节点选中},//树形控件：expand事件handleTreeExpanded(expandedKeys){this.expandedKeys=expandedKeys;},

清除事件

重新打开时，需要还原组件状态，例如滚动条位置，搜索框关键字等

handleReset(){this.keyword="";this.$nextTick(()=>{//搜索框关键字清除constele=this.$refs.singleTreeTransfer.$el.getElementsByClassName("anticon-close-circle");if(ele&&ele.length){ele[0]&&ele[0].click();ele[1]&&ele[1].click();}//滚动条回到顶部if(this.$el.querySelector(".mcd-tree")){this.$el.querySelector(".mcd-tree").scrollTop=0;}//展开数据还原this.expandedKeys=[];});}