1000字范文 > Vue3 + Ant Design Vue 可搜索自定义字段 a-tree

Vue3 + Ant Design Vue 可搜索自定义字段 a-tree

时间：2019-05-15 14:02:53

记录一下，使用 Ant Design Vue a-tree 需要实现可搜索且后台返回数据不是标准数据的问题

可搜索自定义字段

实现自定义字段需要使用Tree props的 replaceFields 属性

完整全部代码

<template><div><a-space><a-input v-model:value="basicData.searchValue" placeholder="请输入物料类别名称" /></a-space><a-tree :tree-data="basicData.treeData" :replaceFields="basicData.replaceFields" :expandedKeys="basicData.expandedKeys" :auto-expand-parent="basicData.autoExpandParent" @expand="onExpand" @select="onSelect"><template #title="{ code }"><span v-if="code.indexOf(basicData.searchValue) > -1">{{code.substr(0, code.indexOf(basicData.searchValue)) }}<span style="color: #f50">{{basicData.searchValue }}</span>{{code.substr(code.indexOf(basicData.searchValue) + basicData.searchValue.length) }}</span><span v-else>{{code }}</span></template></a-tree></div></template><script lang="ts" setup>import {reactive, ref, watch } from 'vue'import {TreeDataItem } from 'ant-design-vue/es/tree/Tree'import {GetTree } from '/@/api/wms/basicDataModule/inventoryCategoryArchives'/* 页面基础数据 */const basicData = reactive({searchValue: '',expandedKeys: [] as string[],backupsExpandedKeys: [] as string[],autoExpandParent: false,replaceFields: {title: 'name',key: 'code',},treeData: [] as TreeDataItem[],})/*** @description: 获取树形数据* @return {*}* @author: WANAN*/const getTreeData = () => {GetTree().then((res) => {basicData.treeData = resconsole.log(res)}).catch((err) => {console.log(err)})}getTreeData()/* --------------------------- 树形 a-tree --------------------------- *//*** @description: 展开/收起节点时触发* @param {*} keys* @return {*}* @author: WANAN*/const onExpand = (keys: string[]) => {basicData.expandedKeys = keysbasicData.autoExpandParent = false}/*** @description: 选中树形节点触发* @param {*} selectedKeys* @param {*} e* @return {*}* @author: WANAN*/const onSelect = (selectedKeys, _e) => {}/*** @description: 获取节点中含有value的所有key集合* @param {*} value* @param {*} tree* @param {*} keyList* @return {*}* @author: WANAN*/const getkeyList = (value, tree, keyList) => {//遍历所有同一级的树for (let i = 0; i < tree.length; i++) {let node = tree[i]//如果该节点存在value值则pushif (node.code.indexOf(value) > -1) {keyList.push(node.code)}//如果拥有孩子继续遍历if (node.children) {getkeyList(value, node.children, keyList)}}//因为是引用类型，所有每次递归操作的都是同一个数组return keyList}//该递归主要用于获取key的父亲节点的key值const getParentKey = (key, tree) => {let parentKey, temp//遍历同级节点for (let i = 0; i < tree.length; i++) {const node = tree[i]if (node.children) {//如果该节点的孩子中存在该key值，则该节点就是我们要找的父亲节点//如果不存在，继续遍历其子节点if (node.children.some((item) => item.code === key)) {parentKey = node.code} else if ((temp = getParentKey(key, node.children))) {//parentKey = this.getParentKey(key,node.children)//改进，避免二次遍历parentKey = temp}}}return parentKey}//获取该节点的所有祖先节点const getAllParentKey = (key, tree) => {var parentKeyif (key) {//获得父亲节点parentKey = getParentKey(key, tree)if (parentKey) {//如果父亲节点存在，判断是否已经存在于展开列表里，不存在就进行pushif (!basicData.backupsExpandedKeys.some((item) => item === parentKey)) {basicData.backupsExpandedKeys.push(parentKey)}//继续向上查找祖先节点getAllParentKey(parentKey, tree)}}}watch(() => basicData.searchValue,(_newVal, _oldVal) => {debuggerif (basicData.searchValue === '') {basicData.expandedKeys = []} else {//首先将展开项与展开项副本置为空basicData.expandedKeys = []basicData.backupsExpandedKeys = []//获取所有存在searchValue的节点let candidateKeysList = getkeyList(basicData.searchValue, basicData.treeData, [])//遍历满足条件的所有节点candidateKeysList.map((item) => {//获取每个节点的母亲节点var key = getParentKey(item, basicData.treeData)//当item是最高一级，父key为undefined，将不放入到数组中//如果母亲已存在于数组中，也不放入到数组中if (key && !basicData.backupsExpandedKeys.some((item) => item === key)) basicData.backupsExpandedKeys.push(key)})let length = basicData.backupsExpandedKeys.lengthfor (let i = 0; i < length; i++) {getAllParentKey(basicData.backupsExpandedKeys[i], basicData.treeData)}basicData.expandedKeys = basicData.backupsExpandedKeys.slice()basicData.autoExpandParent = true}},{immediate: false,})</script>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。