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

<template>
  <div class='plan_tree'>
    <div class='search_view'>
      <el-input
        placeholder='请输入计划名称'
        v-model='searchForm.planName'
      ></el-input>
      <Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
            @click.stop='detail()' />
    </div>
    <div class='tree_container'>
      <el-tree
        :data='data'
        ref='treeRef'
        :filter-node-method='filterNode'
        :props='defaultProps'
        node-key='id'
       class="filter-tree"
        default-expand-all
        :default-checked-keys='defaultChecked'
        @node-click='handleNodeClick'
      >
        <template #default='{ node, data }'>
          <span class='custom-tree-node' style='display: flex;align-items: center;'>
            <Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
                      :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" />
            <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 { Menu, Platform, CircleCheck,Loading } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
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()
const {updateSelectedTreeNode}  = defineProps<{
    updateSelectedTreeNode:Function;
  }>();
watch(
  () => searchForm.value.planName,
  (val) => {
    treeRef.value!.filter(val)
  },
  {
    deep: true,
  },
)
const handleNodeClick = (data) => {
 // console.log(data)
  updateSelectedTreeNode()
}
const filterNode = (value: string, data) => {
  if (!value) return true
  return data.name.includes(value)
}
// 点击详情
const detail = () => {
  router.push('/plan')
}
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;

  .search_view {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;
    align-items: center;

    .el-input {
      margin-top: 6px;
    }
  }

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

  .tree_container {
    height: 100%;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;

    .el-tree {
      // height: 100%;
      width: auto;
    }
  }
}
.filter-tree {
//  border: 1px solid #dcdfe6;
  min-width: 100%;
 height: 97%;
  display: inline-block;
  overflow: auto;
  margin-top: 12px;
}

.filter-tree span {
  font-size: 16px;
  display:block;
  overflow:hidden;
  // word-break:keep-all;
  // white-space:nowrap;
  //  text-overflow:ellipsis;
   padding-right: 12px;
}
.leftBox {
  // float: left;
  // width: 20%;
  height: 100%;
  width: 100%;
}
.left {
  height: calc(100% - 45px);
  overflow: auto;
}
/* 设置滚动条宽度 */
:deep(.bodyTwo ::-webkit-scrollbar) {
    width: 3px !important; 
    height: 6px !important;   
  } 
</style>