基于element-puls树形控件+模糊搜索列表展示案例

案例效果

1. 当点击时，将包含菜单名字的所有数据展示

2. 当搜索时，将包含搜索关键字的所有数据展示

开始编码

• 问题1：树形控件需要指定节点标签为节点对象的某个属性值（label），比如data如下：

const data = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
]

如果后端返回的数据字段不一样怎么办？可以这样解决（怎么指定label，我没有找到，知道的朋友可以评论区告诉我）

//模拟后端返回的字段
const data = [{
    "companyName": "测试公司1",
    "address":"",
    "telephone":"",
    "children": [
        {
            "companyName": "测试公司1.1",
            "address":"",
            "telephone":"",
            "children": [
                {
                    "companyName": "测试公司1.1.1",
                    "address":"",
                    "telephone":"",
                    "children": [
                        {
                            "companyName": "测试公司1.1.1.1",
                            "address":"",
                            "telephone":"",
                        }
                    ],
                },
                {
                    "companyName": "测试公司1.1.2",
                    "address":"",
                    "telephone":"",
                }
            ],
        },
        {
            "companyName": "测试公司1.2",
            "address":"",
            "telephone":"",
            "children": [
                {
                    "companyName": "测试公司1.2.1",
                    "address":"",
                    "telephone":"",
                }
            ],
        },
        {
            "companyName": "测试公司1.3",
            "address":"",
            "telephone":"",
        }
    ],
  }]
  
// 模拟网络调用
// 处理数据见data.png
export default function () {
  return new Promise((resolve) => {
    resolve(data)
  })
}

//解决转换树形结构，将companyName改为label
function getCompanyName(tree){
  if (!tree || tree.length === 0) {
    return []; // 空树返回空数组
  }
  return tree.map(node => {
    const newNode = {
      label: node.companyName, // 将键名`companyName`改为`label`
      address:node.address,
      telephone:node.telephone
    };

    if (node.children && node.children.length > 0) {
      newNode.children = getCompanyName(node.children); // 递归处理子节点
    }
    return newNode;
  });
}

• 问题2：模糊搜索

// 输入搜索关键字，模糊搜索
function change(){
  tableData.value = tablearr.filter((item) => {
    let isExist = item.companyName.toLowerCase().includes(key.value.toLowerCase()) ||
      item.companyName.toLowerCase().includes(key.value.toLowerCase())
    return key.value
      ? isExist : tablearr
  })
}

完整代码

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-input v-model="key" placeholder="搜索内容" @input="change" />
        <el-tree ref="tree" :data="compList" 
        :highlight-current="true" node-key="companyName" 
        :expand-on-click-node="false" @node-click="selectNode" />
      </el-aside>
      <el-main>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="companyName" label="公司名称" width="300px" />
          <el-table-column prop="address" label="地址" width="300px" />
          <el-table-column prop="telephone" label="电话" />
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '../request'

const tree=ref()
const data = ref([])
const key = ref('')
const compList = ref([])
const tableData = ref([])


// 转化树形结构
function getCompanyName(tree){
  if (!tree || tree.length === 0) {
    return []; // 空树返回空数组
  }
  return tree.map(node => {
    const newNode = {
      label: node.companyName, // 将键名`companyName`改为`label`
      address:node.address,
      telephone:node.telephone
    };

    if (node.children && node.children.length > 0) {
      newNode.children = getCompanyName(node.children); // 递归处理子节点
    }
    return newNode;
  });
}

// 将后端的树形结构扁平化为一个数组 [{...}, {...}, {...}, {...}]
function getTableData(tree) {
  const result = [];
  function traverse(node) {
    const newNode = {
      companyName: node.companyName,
      address:node.address,
      telephone:node.telephone
    };
    result.push(newNode);
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => {
        traverse(child);
      });
    }
  }
  tree.forEach(node => {
    traverse(node);
  });
  return result;
}

// 点击数据节点，改变tabel表格的数据
let tablearr ;
function selectNode(node,comp){
  console.log(node);
  tableData.value = tablearr.filter((item)=>{
    if(item.companyName.includes(comp.label)){
      return item
    }else{
      return
    }
  })

}

// 输入搜索关键字，模糊搜索
function change(){
  console.log(tree.value.getNode(key));
  tableData.value = tablearr.filter((item) => {
    let isExist = item.companyName.toLowerCase().includes(key.value.toLowerCase()) ||
      item.companyName.toLowerCase().includes(key.value.toLowerCase())
    return key.value
      ? isExist : tablearr
  })
}


onMounted(async ()=>{
  // 设置数据
  data.value = await request().then(res => data.value = res)
  compList.value = getCompanyName(data.value)
  tableData.value = getTableData(data.value)
  tablearr=tableData.value
})

</script>