站長資訊網(wǎng)本篇文章帶大家了解一下利用Ant Design Vue實(shí)現(xiàn)省市穿梭框的方法，希望對大家有所幫助！
樹形穿梭框
官方樹穿梭框如下，左右是樹結(jié)構(gòu)，右邊是列表。
本質(zhì)上是有兩套數(shù)據(jù)源，tree 使用的是樹狀數(shù)據(jù)源，transfer 使用的是列表數(shù)據(jù)源，將多維的樹狀數(shù)據(jù)源轉(zhuǎn)為一維的，就是列表數(shù)據(jù)了。
具體使用可以查看官方文檔之 帶搜索框的穿梭框（https://antdv.com/components/transfer-cn/）
城市穿梭框
改造穿梭框的原因：
-
targetKeys只需要城市數(shù)據(jù)，不需要省份數(shù)據(jù) -
源穿梭框中，子節(jié)點(diǎn)和父節(jié)點(diǎn)沒有關(guān)聯(lián)選中關(guān)系，需要處理，畢竟省市級是需要聯(lián)動的
-
目標(biāo)穿梭框，也要支持樹狀結(jié)構(gòu)
主要實(shí)現(xiàn)功能點(diǎn)：
-
樹形結(jié)構(gòu)數(shù)據(jù)處理：關(guān)鍵詞過濾；已選數(shù)據(jù)禁用狀態(tài)；
-
實(shí)現(xiàn)父節(jié)點(diǎn)和節(jié)點(diǎn)的關(guān)聯(lián)選中
-
穿梭框右側(cè)僅展示城市數(shù)據(jù)，不顯示省份數(shù)據(jù)
-
選中城市數(shù)據(jù)：帶省級信息返回，滿足接口要求，即返回樹狀結(jié)構(gòu)
改造的本質(zhì)：基于transfer的二次改造，主要是對數(shù)據(jù)的處理，組件基本沒啥改變
組件參數(shù)和事件
自定義參數(shù)：考慮對外暴露的參數(shù)，參數(shù)的作用，屬性等 自定義事件：考慮暴露出去的回調(diào)事件
// 自定義參數(shù) export default { props: { dataSource: { // 數(shù)據(jù)源 type: Array, default: () => [], }, targetKey: { // 右側(cè)框數(shù)據(jù)的 key 集合 type: Array, default: () => [], }, }, }; // handleChange回調(diào)函數(shù)：treeData-左側(cè)樹結(jié)構(gòu)數(shù)據(jù)，toArray-右側(cè)樹結(jié)構(gòu)數(shù)據(jù)，targetKeys-選中城市key集合 this.$emit("handleChange", this.treeData, toArray, this.targetKeys);
穿梭框處理
<template> <!-- 穿梭框組件，數(shù)據(jù)源為列表形式 --> <a-transfer class="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" > <template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect, itemSelectAll }, }" > <!-- 左邊源數(shù)據(jù)框：樹形控件 --> <a-tree v-if="direction === 'left'" class="mcd-tree" blockNode checkable :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>
數(shù)據(jù)源處理
-
穿梭框數(shù)據(jù)處理（transferDataSource）：多維數(shù)據(jù)轉(zhuǎn)為一維數(shù)據(jù)
-
樹數(shù)據(jù)處理（treeData）：數(shù)據(jù)源過濾處理，數(shù)據(jù)禁止操作處理
// 數(shù)據(jù)源示例 const dataSource = [ { pid: "0", key: "1000", label: "黑龍江省", title: "黑龍江省", children: [ { pid: "1000", key: "1028", label: "大興安嶺地區(qū)", title: "大興安嶺地區(qū)", }, ], }, ]; // ant-transfer穿梭框數(shù)據(jù)源 transferDataSource() { // 穿梭框數(shù)據(jù)源 let transferDataSource = []; // 穿梭框數(shù)據(jù)轉(zhuǎn)換，多維轉(zhuǎn)為一維 function flatten(list = []) { list.forEach((item) => { transferDataSource.push(item); // 子數(shù)據(jù)處理 if (item.children && item.children.length) { flatten(item.children); } }); } if (this.dataSource && this.dataSource.length) { flatten(JSON.parse(JSON.stringify(this.dataSource))); } return transferDataSource; } // ant-tree樹數(shù)據(jù)源 treeData() { // 樹形控件數(shù)據(jù)源 const validate = (node, map) => { // 數(shù)據(jù)過濾處理 includes return node.title.includes(this.keyword); }; const result = filterTree( this.dataSource, this.targetKeys, validate, this.keyword ); return result; } // 樹形結(jié)構(gòu)數(shù)據(jù)過濾 const filterTree = (tree = [], targetKeys = [], validate = () => {}) => { if (!tree.length) { return []; } const result = []; for (let item of tree) { if (item.children && item.children.length) { let node = { ...item, children: [], disabled: targetKeys.includes(item.key), // 禁用屬性 }; // 子級處理 for (let o of item.children) { if (!validate.apply(null, [o, targetKeys])) continue; node.children.push({ ...o, disabled: targetKeys.includes(o.key) }); } if (node.children.length) { result.push(node); } } } return result; };
穿梭框事件處理
-
change 事件，回調(diào)數(shù)據(jù)（handleTransferChange）
-
search 搜索事件（handleTransferSearch）
// 穿梭框：change事件 handleTransferChange(targetKeys, direction, moveKeys) { // 過濾：避免頭部操作欄“全選”將省級key選中至右邊 this.targetKeys = targetKeys.filter((o) => !this.pidKeys.includes(o)); // 選中城市數(shù)據(jù)：帶省級信息返回，滿足接口要求 const validate = (node, map) => { return map.includes(node.key) && node.title.includes(this.keyword); }; let toArray = filterTree(this.dataSource, this.targetKeys, validate); // handleChange回調(diào)函數(shù)：treeData-左側(cè)樹結(jié)構(gòu)數(shù)據(jù)，toArray-右側(cè)樹結(jié)構(gòu)數(shù)據(jù)，targetKeys-選中城市key集合 this.$emit("handleChange", this.treeData, toArray, this.targetKeys); }, // 穿梭框：搜索事件 handleTransferSearch(dir, value) { if (dir === "left") { this.keyword = value; } },
樹事件
-
change 事件，處理父節(jié)點(diǎn)和子節(jié)點(diǎn)的聯(lián)動關(guān)系（handleTreeChecked）
-
expand 事件：樹的展開和收縮（handleTreeExpanded）
// 樹形控件：change事件 handleTreeChecked(keys, e, checkedKeys, itemSelect, itemSelectAll) { const { eventKey, checked, dataRef: { children }, } = e.node; if (this.pidKeys && this.pidKeys.includes(eventKey)) { // 父節(jié)點(diǎn)選中：將所有子節(jié)點(diǎn)也選中 let childKeys = children ? children.map((item) => item.key) : []; if (childKeys.length) itemSelectAll(childKeys, !checked); } itemSelect(eventKey, !isChecked(checkedKeys, eventKey)); // 子節(jié)點(diǎn)選中 }, // 樹形控件：expand事件 handleTreeExpanded(expandedKeys) { this.expandedKeys = expandedKeys; },
清除事件
重新打開時，需要還原組件狀態(tài)，例如滾動條位置，搜索框關(guān)鍵字等
handleReset() { this.keyword = ""; this.$nextTick(() => { // 搜索框關(guān)鍵字清除 const ele = 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; } // 展開數(shù)據(jù)還原 this.expandedKeys = []; }); }
【
