el-tree 根据多个结果筛选树状图

右侧搜索根据条件查找到对应人，人再查询到对应部门。

<template>
    <div class="contact_tree">
        <el-input v-model="filterText" size="small" placeholder="名称和电话过滤" clearable />
        <el-tree class="contact_tree1" :data="tree" node-key="id" ref="tree" default-expand-all
            :filter-node-method="filterNode" :expand-on-click-node="false" @node-click="nodeClick">
            <template #default="{ data }">
                <span class="custom-tree-node">
                    <p class="tree_name" :title="data.lxdh ? `联系电话：${data.lxdh}` : ''">{{ data.value }} {{ data.lxdh ?
                        `（${data.lxdh}）` : "" }}</p>
                    <el-button style="position: absolute;right: 12px;" v-if="data.lxdh" type="text"
                        @click.stop="callDH(data)">呼叫</el-button>
                </span>
            </template>
        </el-tree>
    </div>
    <div class="contact_list">
        <el-input v-model="filterPolice" placeholder="名称和电话过滤" clearable size="small" />
        <div style="margin-top: 10px;">
            <el-table :data="list" height="400" border style="width: 100%">
                <el-table-column prop="yhmc" label="名称" width="130"> </el-table-column>
                <el-table-column prop="lxdh" label="联系电话">
                    <template #default="scope">
                        <div v-if="scope.row.lxdh">
                            {{ scope.row.lxdh }}
                            <el-button v-show="scope.row.lxdh" link type="text" size="small"
                                @click="callDH(scope.row)">呼叫</el-button>
                        </div>
                        <div v-else>暂无号码</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapState } from "vuex";
    import { setStore, getStore, clearStore } from "@/util/store";
    import { read, utils } from "xlsx";
    export default {
        data() {
            return {
                tree: [],
                outTree: [],
                list: [],
                outList: [],
                police: {},
                filterText: "",
                filterPolice: "",
                currNode: "",
                currNode2: "",
                activeTab: "1",
                addVis: false,
                importExcel: [],
                uploadShow: true,
                formFZ: {
                    fid: "",
                    mc: "",
                },
                formDW: {
                    ssfzid: "",
                    dwmc: "",
                    lxdh: "",
                },
                formRY: {
                    fid: "",
                    lxrmc: "",
                    lxdh: "",
                    lxdz: "",
                },
                rules: {
                    mc: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
                    dwmc: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
                    lxrmc: [{ required: true, message: "请输入联系人名称", trigger: "blur" }],
                    lxdh: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
                },
            };
        },
        mounted() {
            this.$store.dispatch("contacts/getDept").then((v) => {
                this.tree = v;
            });
            let police = getStore({ name: "policeman" });
            police.forEach((v) => {
                this.police[v.dwbh] ? "" : (this.police[v.dwbh] = []);
                if (v.yhmc) this.police[v.dwbh].push(v);
            });
            this.getFZList();
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
            filterPolice(val) {
                this.filterDeptByKeywold(val);
            },
        },
        methods: {
            callDH(row) {
                if (row && row.lxdh) this.$emitter.emit("changeDHHM", row.lxdh);
                else this.$message.warning("暂无电话");
            },
            closeBox() {
                this.$store.commit("contacts/SET_CONTACTSVIS", false);
            },
            getList(val) {
                if (val) {
                    let arr = this.police[this.currNode] || [];
                    this.list = arr.filter((v) => {
                        return (v.yhmc && v.yhmc.indexOf(val) !== -1) || (v.lxdh && v.lxdh.indexOf(val) !== -1);
                    });
                } else {
                    this.list = this.police[this.currNode] || [];
                }
            },
            filterNode(value, data) {
                if (!value) return true;

                // 根据右边的数组对象结果筛选左边的部门
                if (Object.prototype.toString.call(value) === "[object Array]") {
                    let target = value.find((s) => s.dwbh === data.key);
                    if (target) {
                        return true;
                    }
                }

                let is = data.value.indexOf(value) !== -1 || (data.lxdh && data.lxdh.indexOf(value) !== -1);
                return is;
            },
            // 根据关键字查找右侧联系人并找到对应的部门
            filterDeptByKeywold(val) {
                if (val) {
                    // 根据keyword查找指定对象
                    let temp = [];
                    for (const key in this.police) {
                        if (Object.hasOwnProperty.call(this.police, key)) {
                            const item = this.police[key];
                            let target = item.filter((s) => (s.lxdh && s.lxdh.includes(val)) || (s.yhmc && s.yhmc.includes(val)));
                            if (target) {
                                temp = temp.concat(target);
                            }
                        }
                    }
                    this.list = temp;
                    // 查找到则去找到对应部门，未查找到则重置左侧部门数据
                    if (this.list.length === 0) {
                        this.$refs.tree.filter("");
                    } else {
                        this.$refs.tree.filter(this.list);
                    }
                    console.log(this.list, "this.list");
                } else {
                    this.$refs.tree.filter(val);
                    this.list = [];
                }
            },
            nodeClick(data) {
                this.currNode = data.key;
                this.getList();
            },
            // 外部过滤
            filterNode2(value, data) {
                if (!value) return true;
                let is = (data.mc && data.mc.indexOf(value) !== -1) || (data.dwmc && data.dwmc.indexOf(value) !== -1) || (data.lxdh && data.lxdh.indexOf(value) !== -1);
                return is;
            },
            nodeClick2(data) {
                if (data && data.lx == "0") {
                    this.currNode2 = data;
                    this.filterPolice2 = "";
                    this.getRYList();
                } else {
                    this.$store.commit("contacts/SET_WBLISTRY", []);
                }
            },
            // 获取左侧分组
            getFZList() {
                this.$store.dispatch("contacts/getTXLDW").then((v) => { });
            },
            // 获取右侧联系人
            getRYList() {
                this.$store
                    .dispatch("contacts/getTXLRY", {
                        dwid: this.currNode2.id,
                        keyWord: this.filterPolice2,
                    })
                    .then((v) => { });
            },
        },
    };