integrated_traffic_vue/src/components/electronic_fence_tree/index.vue

<template>
  <el-input
    v-model="filterText"
    placeholder="输入关键字进行过滤"
    class="mb-10"
  />
  <el-tree
    ref="treeRef"
    :props="{
      children: 'nodes',
      label: 'name',
    }"
    node-key="id"
    accordion
    :data="treeData"
    :filter-node-method="fnFilterNode"
    @node-click="nodeClick"
    :default-expanded-keys="[electronicFenceAreaId]"
  />
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";
import { layoutFnGetElectronicFenceTree } from "@/assets/js/data_dictionary.js";

defineOptions({
  name: "LayoutElectronicFenceTree",
});
const props = defineProps({
  refresh: {
    type: Boolean,
    default: false,
  },
  electronicFenceAreaId: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["node-click", "throw-data", "update:refresh"]);
const treeRef = ref(null);
const filterText = ref("");
const treeData = ref([]);
watch(filterText, (val) => {
  treeRef.value.filter(val);
});
watchEffect(() => {
  if (props.refresh) fnGetTreeData();
});
const fnFilterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};
const fnGetTreeData = async () => {
  const { value } = await layoutFnGetElectronicFenceTree();
  treeData.value = value;
  emits("throw-data", value);
  emits("update:refresh", false);
};
fnGetTreeData();
const nodeClick = (data) => {
  emits("node-click", data);
};
</script>

<style scoped lang="scss"></style>