element-plus2.5.10版本el-tree按不同级别设置不同图标与选中图标

Love The Way You Lie 2024-04-01 10:34 10阅读 0赞

需要实现的效果：  
![在这里插入图片描述][566b13fac7144b00bb93abff33416cf7.png]

查看tree组件node节点的数据结构是这样的，这个官方文档中没看到说明，自己打印了一下看到的，其中比较有用的属性就是`level`当前树节点的等级，`data`当前树节点的数据，`isCurrent`是否是当前选中的树节点  
![在这里插入图片描述][40d5d9f1a59b46c2894edc255880a38f.png]  
所以可以使用插槽与`node`属性来来生成不同图标，以下代码可以用于参考

<template>
          <div class="left-tree">
            <el-tree :data="data" @node-click="handleNodeClick" node-key="id" default-expand-all>
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  
                  <img :src="requireImg('tree/1.png')" v-if="node.level === 1" class="icon" />
                  
                  <img :src="requireImg('tree/2.png')" v-if="node.childNodes.length && node.level !== 1" class="icon" />
                  
                  <img :src="requireImg('tree/4.png')" v-show="!node.isCurrent && !node.childNodes.length && node.level !== 1" class="icon" />
                  
                  <img :src="requireImg('tree/3.png')" v-show="node.isCurrent && !node.childNodes.length && node.level !== 1" class="icon" />
                  <span @click="getNode(node)" :class="[node.childNodes.length ? 'bold' : '', node.isCurrent ? 'orange' : '']">{
       { node.label }}</span>
                </span>
              </template>
            </el-tree>
          </div>
    </template>
    <script>
    export default {
          
      data() {
          
        return {
          
          data: [
            {
          
              id: 1,
              label: "发起工单",
              children: [
                {
          
                  id: 4,
                  label: "待派发（11）",
                  a: 1,
                },
                {
          
                  id: 4,
                  label: "已派发（25）",
                  a: 1,
                },
              ],
              a: 10,
            },
            {
          
              id: 2,
              label: "工单情况汇总",
              children: [
                {
           id: 5, label: "待完成（3）", a: 1 },
                {
           id: 6, label: "已完成（5）", a: 1 },
                {
           id: 7, label: "发起人确认（1）", a: 1 },
              ],
              a: 0,
            },
            {
          
              id: 3,
              label: "工单确认",
              children: [
                {
           id: 7, label: "待确认（3）", a: 1 },
                {
           id: 8, label: "已确认（3）", a: 1 },
              ],
              a: 0,
            },
            {
          
              id: 3,
              label: "相关查询",
              children: [
                {
           id: 9, label: "待完成（3）", a: 1 },
                {
           id: 10, label: "待确认（3）", a: 1 },
                {
           id: 11, label: "已确认（3）", a: 1 },
                {
          
                  id: 12,
                  label: "已归档（196）",
                  a: 1,
                  children: [
                    {
          
                      id: 13,
                      label: "2022",
                      a: 2,
                      children: [
                        {
           id: 142, label: "01", a: 3 },
                        {
           id: 142, label: "02", a: 3 },
                        {
           id: 142, label: "03", a: 3 },
                      ],
                    },
                  ],
                },
              ],
              a: 0,
            },
          ],
          defaultProps: {
          
            children: "children",
            label: "label",
          },
        }
      },
      methods: {
          
        // 这个打印出来的是node.data
        handleNodeClick(data) {
          
          console.log(data)
        },
         // 这个打印出来的是node
         getNode(node) {
          
          console.log(node)
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .custom-tree-node {
          
          display: flex;
          align-items: center;
          .icon {
          
            margin-right: 10px;
          }
          .bold {
          
            font-weight: bold;
          }
          .orange {
          
            color: #f1a428;
          }
        }
    </style>

[566b13fac7144b00bb93abff33416cf7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2c26d360ce30416da55ada137c024a55.png
[40d5d9f1a59b46c2894edc255880a38f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/10e84f57e98b4c37a810c6d69ec5285d.png