Ant Design Vue で州と都市のシャトル ボックスを実装する方法について話しましょう

この記事では、Ant Design Vue を使用して地方および市のシャトル ボックスを実装する方法について説明します。お役に立てば幸いです。

ツリー シャトル ボックス

公式のツリー シャトル ボックスは次のとおりです。左側にツリー構造、右側にリストがあります。

本質的に、データ ソースには 2 つのセットがあります。treeはツリー データ ソースを使用し、transferはリスト データ ソースを使用して多次元ツリー データを変換します。ソースはリスト データである 1 次元に変換されます。

具体的な使用方法については、検索ボックス付きシャトル ボックスの公式ドキュメント (https://antdv.com/components/transfer-cn/)

## を確認してください。

#シャトル ボックスを変換する理由:

• targetKeys

  必要なのは市区町村のデータのみであり、州のデータは必要ありません

ソース シャトル ボックスでは、子ノードと親ノードには関連する選択関係がないため、処理する必要があります。結局、州レベルと市レベルをリンクする必要があります。
ターゲット シャトル ボックスもサポートされている必要があります。ツリー構造
主な実装機能ポイント:

ツリー構造データ処理: キーワード フィルタリング; 選択されたデータの無効な状態;
親ノードとノード選択の間の関連付けを実現する
シャトル ボックス、都市データのみが表示され、県データは表示されません
選択された都市データ: 県情報とともに返され、インターフェイス要件を満たします。つまり、ツリー構造を返します

変換の本質:

の 2 番目の変換は主にデータ処理に関するものであり、コンポーネントは基本的に何も行っていません。コンポーネントのパラメータとイベント

カスタム パラメータ: 外部に公開されるパラメータを考慮してください。パラメータ、属性などの役割。 カスタム イベント: 公開されたコールバック イベントを検討してください

// 自定义参数 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);

シャトル ボックス処理

シャトル ボックス データ処理 ( transferDataSource）：多次元データを１次元データに変換
ツリーデータ処理（treeData）：データソースのフィルタリング処理、データ禁止操作処理

• // 数据源示例 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)
search検索イベント( handleTransferSearch)

• // 穿梭框：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; } },

  ログイン後にコピー

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)) { // 父节点选中：将所有子节点也选中 let childKeys = children ? children.map((item) => item.key) : []; if (childKeys.length) itemSelectAll(childKeys, !checked); } itemSelect(eventKey, !isChecked(checkedKeys, eventKey)); // 子节点选中 }, // 树形控件：expand事件 handleTreeExpanded(expandedKeys) { this.expandedKeys = expandedKeys; },

  ログイン後にコピー

Re 開くときに、スクロール バーの位置、検索ボックスのキーワードなどのコンポーネントの状態を復元する必要があります。

handleReset() { this.keyword = ""; this.$nextTick(() => { // 搜索框关键字清除 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; } // 展开数据还原 this.expandedKeys = []; }); }

[関連する推奨事項: "

"]

以上がAnt Design Vue で州と都市のシャトル ボックスを実装する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。