vue3+vite+ts+ant Design Vue实现自定义树型控件

项目需求：

1、可实现模糊搜索功能，2、可实现自定义树型控件，
注：ant-design-vue 全局引入

完整代码

<template>
  <div>
    <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
    <a-tree
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :tree-data="gData"
      checkable
      @expand="onExpand"
    >
      <template #switcherIcon="{ expanded }">
        <!-- 自定义树节点的展开/折叠图标 -->
        <div class="switcher-icon">
          <!-- expanded折叠为true,展开为false -->
          <img :class="[expanded?'a2':'a1']" src="../../assets/image/u001.png" alt="" />
        </div>
      </template>
      <!-- 自定义标题 -->
      <template #title="{ title }">
        <div class="title-box">
          <div class="title-img">
            <img src="../../assets/image/u002.png" alt="" />
          </div>
          <div class="title-text">
            <span v-if="title.indexOf(searchValue) > -1">
              {{ title.substr(0, title.indexOf(searchValue)) }}
              <span style="color: #f50">{{ searchValue }}</span>
              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </div>
          <div class="title-edite">
            <img src="../../assets/image/u003.png" alt="" />
            <img src="../../assets/image/u004.png" alt="" />
          </div>
        </div>
      </template>
    </a-tree>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { TreeProps } from 'ant-design-vue';

const x = 3;
const y = 2;
const z = 1;
const genData: TreeProps['treeData'] = [];

const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
  const preKey = _preKey || '0';
  const tns = _tns || genData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);

const dataList: TreeProps['treeData'] = [];
const generateList = (data: TreeProps['treeData']) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.key;
    dataList.push({ key, title: key });
    if (node.children) {
      generateList(node.children);
    }
  }
};
generateList(genData);

const getParentKey = (
  key: string | number,
  tree: TreeProps['treeData'],
): string | number | undefined => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
const expandedKeys = ref<(string | number)[]>([]);
const searchValue = ref<string>('');
const autoExpandParent = ref<boolean>(true); // 是否自动展开父节点
const gData = ref<TreeProps['treeData']>(genData); // treeNodes 数据

// 展开/收起节点时触发
const onExpand = (keys: string[]) => {
  expandedKeys.value = keys;
  autoExpandParent.value = false;
};

watch(searchValue, value => {
  const expanded = dataList
    .map((item: TreeProps['treeData'][number]) => {
      if (item.title.indexOf(value) > -1) {
        return getParentKey(item.key, gData.value);
      }
      return null;
    })
    .filter((item, i, self) => item && self.indexOf(item) === i);
  expandedKeys.value = expanded;
  searchValue.value = value;
  autoExpandParent.value = true;
});
</script>

<style lang="less" scoped>
  .switcher-icon {
    
    img{
      height: 10px;
    }
  }
  .a1 {
    transform: rotate(-90deg);
  }
  .a2 {
    transform: rotate(0deg);
  }
  .title-box {
    display: flex;
    .title-img {

      img{
        height: 20px;
      }
    }
    .title-text {
      padding-left: 15px;
    }
    .title-edite {
      display: flex;
      position: relative;
      left: 255px;
      img{
        height: 20px;
        padding-right: 15px;
      }
    }
  }
  :deep(:where(.css-dev-only-do-not-override-eq3tly).ant-tree .ant-tree-treenode) { // 修改标题上下间距
    padding: 0 0 15px 0;
  }
</style>

实现效果