过滤机构树，vue3+ant tree

LILEILEILOVE

已于 2022-09-23 16:49:04 修改

阅读量449

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript 前端开发语言

于 2022-09-23 16:48:05 首次发布

本文链接：https://blog.csdn.net/LILEILEILOVE/article/details/127014020

vue 专栏收录该内容

51 篇文章

订阅专栏

本文介绍如何在Vue3项目中利用Ant Design的Tree组件，实现动态过滤和展示机构数据的功能，详细讲解了相关配置和关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤机构树，vue3+ant tree

<InputSearch v-model:value="searchValue" @change="filterOrg" style="margin-bottom: 8px"
                placeholder="搜索" />
              <Tree autoExpandParent v-model:checkedKeys="sendForm.checkedKeys" checkable :tree-data="treeOrg"
              :replaceFields="{children:'sysOrgList', title:'name', key:'id'}"
               @check="handleCheck">
               <template #title="{ name }">
                  <span v-if="name.indexOf(searchValue) > -1">
                    {{ name.substr(0, name.indexOf(searchValue)) }}
                    <span style="color: #f50">{{ searchValue }}</span>
                    {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
                  </span>
                  <span v-else>{{ name }}</span>
                </template>
              </Tree>

const changeTree = (arr) => {
  arr.forEach(item => {
    if (Boolean(item.sysOrgList?.length)) {
      item.sysOrgList = [...item.sysOrgList, ...item.sysUserList]
      changeTree(item.sysOrgList)
    } else {
      if (Boolean(item?.sysUserList)) {
        item.sysOrgList = [...item.sysUserList]
      }
    }
  })
}
const treeOrg: any = ref([])
async function selectRole() {
  let res = await listSysOrgAndUserVO()
  treeData.value = res.filter((item) => { return item.name === "公司" })
  changeTree(treeData.value)
  treeOrg.value = [...treeData.value]



}
const filterOrg=()=> {
  let arr: any = []
  let orgArray:any = JSON.parse(JSON.stringify(treeData.value))//进行深拷贝


  orgArray.forEach(item => {
    if (Boolean(item.sysOrgList?.length)) {
      item.sysOrgList = filterTreeNodeFun(item.sysOrgList, searchValue.value)
      if (item.sysOrgList.length) {
        arr.push(item)
      
      }

    } else
      if (item.name.indexOf(searchValue.value) > -1) {
        arr.push(item)

      }


  })



  if (arr[0]?.sysOrgList.length) {

    treeOrg.value = [...arr]

  } else {
    treeOrg.value = []
  }
  
}


const filterTreeNodeFun = (arrList, value) => {
  
  let arr: any = []
  arrList.forEach(item => {
   
    if (Boolean(item.sysOrgList?.length)) {
      item.sysOrgList = filterTreeNodeFun(item.sysOrgList, value)
      if (item.sysOrgList.length) {
        arr.push(item)
      }
    } else
      if (item.name.indexOf(value) > -1) {
        arr.push(item)

      }


  })
 
  return arr

};