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: tree verwendet eine Baumdatenquelle und transfer verwendet eine Listendatenquelle, um mehrdimensionale Baumdatenquellen zu konvertieren ist eindimensional, also Listendaten. tree 使用的是树状数据源，transfer 使用的是列表数据源，将多维的树状数据源转为一维的，就是列表数据了。
具体使用可以查看官方文档之 带搜索框的穿梭框（https://antdv.com/components/transfer-cn/）
城市穿梭框
改造穿梭框的原因：
主要实现功能点：
改造的本质：基于transfer
Informationen zur spezifischen Verwendung finden Sie in der offiziellen Dokumentation der Shuttle-Box mit Suchfeld (https://antdv.com/components/transfer-cn/)
Urban Shuttle Box Renovierung der Shuttle-Box Grund:
targetKeys benö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;
Shuttle-Box-Ereignisverarbeitung
Änderungsereignis, Rückrufdaten (handleTransferChange)
Suche Suchereignis (handleTransferSearch)
🎜🎜
<template>
<!-- 穿梭框组件，数据源为列表形式 -->
<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 },
}"
>
<!-- 左边源数据框：树形控件 -->
<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>Nach dem Login kopieren
🎜 🎜Tree-Ereignis🎜🎜🎜🎜🎜change-Ereignis, behandelt die Verknüpfungsbeziehung zwischen übergeordnetem Knoten und untergeordnetem Knoten (handleTreeChecked) 🎜🎜🎜🎜expand-Ereignis: Baumerweiterung und -kontraktion (handleTreeExpanded) 🎜🎜🎜
// 数据源示例
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;
};Nach dem Login kopieren
🎜🎜clear-Ereignis 🎜🎜 🎜Re Beim Öffnen müssen Sie den Komponentenstatus wiederherstellen, z. B. die Position der Bildlaufleiste, Schlüsselwörter im Suchfeld usw.🎜
// 穿梭框：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;
}
},Nach dem Login kopieren
🎜[Verwandte Empfehlung: „🎜vue.js-Tutorial🎜“]🎜
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!
