封装树形筛选数据组件

<template>
  <el-card>
    <el-container>
      <el-input v-model="filterText" placeholder="请输入名称查询" style="margin: 0 12px 12px 0" clearable :prefix-icon="Search" />
      <el-button type="primary" plain @click="handleReset">重置</el-button>
      <el-button type="primary" plain @click="handleSearch">搜索</el-button>
    </el-container>
    <el-scrollbar max-height="800px">
      <el-tree
        ref="treeRef"
        class="filter-tree"
        :data="treeData"
        :props="treeProps"
        show-checkbox
        :default-expand-all="false"
        node-key="code"
        :filter-node-method="filterNode"
        @check-change="handleCheckChange"
      >
      </el-tree>
    </el-scrollbar>
  </el-card>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue';
import { ElTree } from 'element-plus';
import { useAsyncState } from '@vueuse/core';
import { getPosTreeList } from '@/api/businessPersUse';

const treeRef = ref<InstanceType<typeof ElTree>>();
const emit = defineEmits(['search']);
const filterText = ref('');

const keysList = ref<PersUseApi.checkedNodeList[]>([]);
const treeData = ref<Partial<PersUseApi.IPosTreeList>[]>([]);
const treeProps = {
  children: 'children',
  label: 'name',
  value: 'code',
};
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.name.includes(value);
};
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
//获取树形数据
const { state, execute } = useAsyncState(
  () => getPosTreeList(),
  { data: { inner: {}, outer: {} } },
  {
    onSuccess(res) {
      treeData.value.push(res.data.treeDate);
   
    },
  },
);
//el-tree若数据未展开，则checked只能得到点击的数据，得不到子级,此处手动递归加入数组
const handleCheckChange = (data: PersUseApi.IPosTreeList, checked: boolean) => {
  if (checked) {
    const dataArr = [];
    dataArr.push(data);
    const pushKeys = (data: PersUseApi.IPosTreeList[]) => {
      data.forEach((data: PersUseApi.IPosTreeList) => {
        const isLeaf = !data.children || !data.children.length ? true : false;
            const isRepeat = keysList.value.some((d) => d.code == data.code);
        if (isRepeat) return;
        keysList.value.push({
          code: data.code,
          codeType: data.frameworkNodeType,
          isLeaf: isLeaf,
        });
        if (!isLeaf) {
          pushKeys(data.children!);
        }
      });
    };
    pushKeys(dataArr);
  } else {
    keysList.value = keysList.value.filter((item) => item.code !== data.code); //首先去除选中数据
    const currentKeys = treeRef.value?.getCheckedKeys();
    keysList.value = keysList.value.filter((item) => currentKeys?.includes(item.code)); //再去除子级数据
  }
  console.log(' keysList.value', keysList.value);
};
const getUselessKeysFn = (keys: Array<String>) => {
  const uselessKeys: Array<String> = []; //不需要的keys
  const flatArrFn = (Arr: PersUseApi.IPosTreeList[]) => {
    //将数组中含children的对象扁平化，扁平为一个数组
    Arr.forEach((item) => {
      uselessKeys.push(item.code);
      if (item.children && item.children.length) {
        flatArrFn(item.children);
      }
    });
  };
  for (const key of keys) {
    const loopKeys = (data: any, key: any) => {
      //根据key找相同的，找到即停止
      const res = [];
      for (const d of data) {
        if (d.code == key) {
          //如果是叶子节点，则push自己，否则，push children
          if (!d.children && !d.children.length) {res.push(d)}else{
           res.push(d.children);
          flatArrFn(res.flat());//把加入的数组扁平化
          }
             
        } else {
          if (d.children && d.children.length) {
            loopKeys(d.children, key);
          }
        }
      }
    };

    loopKeys(treeData.value, key);
  }
  return uselessKeys;
};
const handleSearch = () => {
  const uselessKeys = getUselessKeysFn(keysList.value);//这里是无用的keys
  const finalKeyList = keysList.value.filter((item) => !uselessKeys.includes(item.code));
  emit('search', finalKeyList);//把最终数据传递给父组件
};

const handleReset = () => {
  treeRef.value?.setCheckedKeys([]);
  emit('search', []);//把最终数据传递给父组件
};
</script>

这篇好文章是转载于：学新通技术网