pqs-9100_client/frontend/src/views/home/components/tree.vue

<template>
  <div class="plan_tree">
    <el-input placeholder="请输入计划名称" v-model="searchForm.planName"></el-input>
    <div class="tree_container">
      <el-tree :data="data" ref="treeRef" :filter-node-method="filterNode" :props="defaultProps" node-key="id"
        default-expand-all :default-checked-keys="defaultChecked" @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/>
          </span>
        </template>

      </el-tree>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, watch } from "vue";
import {
  Menu
} from '@element-plus/icons-vue'
const emit = defineEmits(['jump'])
const data: any = ref([]);
const defaultProps = {
  children: "children",
  label: "name",
  pid: "pid",
};
const searchForm = ref({
  planName: "",
});
const defaultChecked = ref([])
const getTreeData = (val: any) => {
  defaultChecked.value = []
  data.value = val;
  defaultChecked.value.push(data.value[0].children[0].id)
};
const filterText = ref("");
const treeRef = ref();
watch(
  () => searchForm.value.planName,
  (val) => {
    treeRef.value!.filter(val);
  },
  {
    deep: true,
  }
);
const handleNodeClick = (data) => {
  console.log(data);
};
const filterNode = (value: string, data) => {
  if (!value) return true;
  return data.name.includes(value);
};
// 点击详情
const detail=(e:any) => {
 
  emit('jump',e)
  
}
onMounted(() => {
  console.log();
});
defineExpose({ getTreeData });
</script>
<style lang="scss" scoped>
.plan_tree {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  height: calc(100% - 70px);
  background-color: #fff;

  .el-input {
    width: 100%;
    margin: 0 10px 10px 0;
  }

  .tree_container {
    flex: 1;
    overflow-y: auto;

    .el-tree {
      height: 100%;
    }
  }
}
</style>