谈谈Ant Design Vue怎么实现省市穿梭框
树形穿梭框
官方树穿梭框如下,左右是树结构,右边是列表。
本质上是有两套数据源,tree
使用的是树状数据源,transfer
使用的是列表数据源,将多维的树状数据源转为一维的,就是列表数据了。
具体使用可以查看官方文档之 带搜索框的穿梭框(https://antdv.com/components/transfer-cn/)
城市穿梭框
改造穿梭框的原因:
-
targetKeys
只需要城市数据,不需要省份数据 -
源穿梭框中,子节点和父节点没有关联选中关系,需要处理,毕竟省市级是需要联动的
-
目标穿梭框,也要支持树状结构
主要实现功能点:
-
树形结构数据处理:关键词过滤;已选数据禁用状态;
-
实现父节点和节点的关联选中
-
穿梭框右侧仅展示城市数据,不显示省份数据
-
选中城市数据:带省级信息返回,满足接口要求,即返回树状结构
改造的本质:基于transfer
的二次改造,主要是对数据的处理,组件基本没啥改变
组件参数和事件
自定义参数:考虑对外暴露的参数,参数的作用,属性等 自定义事件:考虑暴露出去的回调事件
// 自定义参数
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);
穿梭框处理
<template>
<!-- 穿梭框组件,数据源为列表形式 -->
<a-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'"
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>
数据源处理
-
穿梭框数据处理(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;
},
清除事件
重新打开时,需要还原组件状态,例如滚动条位置,搜索框关键字等
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 = [];
});
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbjjef
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01