Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

Dieser Artikel zeigt Ihnen, wie Sie Ant Design Vue zur Implementierung von Provinz- und Stadt-Shuttle-Boxen verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Baum-Shuttle-Box

Die offizielle Baum-Shuttle-Box sieht wie folgt aus, mit der Baumstruktur links und der Liste rechts.

Im Wesentlichen gibt es zwei Sätze von Datenquellen:treeverwendet eine Baumdatenquelle undtransferverwendet eine Listendatenquelle, um mehrdimensionale Baumdatenquellen zu konvertieren ist eindimensional, also Listendaten.tree使用的是树状数据源，transfer使用的是列表数据源，将多维的树状数据源转为一维的，就是列表数据了。

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

城市穿梭框

改造穿梭框的原因：

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

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

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

主要实现功能点：

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

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

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

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

改造的本质：基于transfer

Urban Shuttle Box

Renovierung der Shuttle-Box Grund:

targetKeysbenötigt nur Stadtdaten, keine Provinzdaten

• In der Quell-Shuttle-Box haben der untergeordnete Knoten und der übergeordnete Knoten keine zugeordnete Auswahlbeziehung und Schließlich muss die

• Ziel-Shuttle-Box, die verknüpft werden muss, auch die Baumstruktur unterstützen.

Hauptfunktionspunkte:

Baumstruktur-Datenverarbeitung: Schlüsselwort Filterung; Status der ausgewählten Daten deaktiviert;
Den Zusammenhang zwischen übergeordnetem Knoten und Knotenauswahl erkennen
Auf der rechten Seite des Shuttle-Felds werden nur Stadtdaten angezeigt, keine Provinzdaten Informationen, erfüllen Sie die Schnittstellenanforderungen, dh geben Sie eine Baumstruktur zurück

Transformation Das Wesentliche: Basierend auf der sekundären Transformation von transfergeht es hauptsächlich um die Datenverarbeitung. Die Komponenten haben sich grundsätzlich nicht geändert

• Komponente Parameter und Ereignisse

Benutzerdefinierte Parameter: Berücksichtigen Sie die nach außen zugänglichen Parameter und die Rolle der Parameter, Attribute usw. Benutzerdefinierte Ereignisse: Berücksichtigen Sie exponierte Rückrufereignisse. treeData): Verarbeitung der Datenquellenfilterung, Verarbeitung verbotener Datenoperationen

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

  Nach dem Login kopieren

Änderungsereignis, Rückrufdaten (handleTransferChange)

Suche Suchereignis (handleTransferSearch)

// 数据源示例 const dataSource = [ { pid: "0", key: "1000", label: "黑龙江省", title: "黑龙江省", children: [ { pid: "1000", key: "1028", label: "大兴安岭地区", title: "大兴安岭地区", }, ], }, ]; // ant-transfer穿梭框数据源 transferDataSource() { // 穿梭框数据源 let transferDataSource = []; // 穿梭框数据转换，多维转为一维 function flatten(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))); } return transferDataSource; } // ant-tree树数据源 treeData() { // 树形控件数据源 const validate = (node, map) => { // 数据过滤处理 includes return node.title.includes(this.keyword); }; const result = filterTree( this.dataSource, this.targetKeys, validate, this.keyword ); return result; } // 树形结构数据过滤 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事件 handleTransferChange(targetKeys, direction, moveKeys) { // 过滤：避免头部操作栏“全选”将省级key选中至右边 this.targetKeys = targetKeys.filter((o) => !this.pidKeys.includes(o)); // 选中城市数据：带省级信息返回，满足接口要求 const validate = (node, map) => { return map.includes(node.key) && node.title.includes(this.keyword); }; let toArray = 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; } },

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!