riku
2024-11-21 f37d45b8998ea08a42002579ecc103244bdac17b
src/components/SideList.vue
@@ -11,24 +11,38 @@
    empty-text="暂无记录"
  >
    <template #default="{ node, data }">
      <div
        :class="
          data.selected
            ? 'selected-tree-node custom-tree-node'
            : 'custom-tree-node'
        "
      >
        <el-icon v-if="data.type == 2" color="var(--el-color-success)"
          ><SuccessFilled
        /></el-icon>
        <el-icon v-else-if="data.type == 1" color="var(--el-color-warning)"
          ><WarningFilled
        /></el-icon>
        <el-icon v-else-if="data.type == 0" color="var(--el-color-danger)"
          ><WarningFilled
        /></el-icon>
        <div>{{ node.label }}</div>
      </div>
      <slot :node="node" :data="data">
        <div
          :class="
            data.selected
              ? 'selected-tree-node custom-tree-node'
              : 'custom-tree-node'
          "
        >
          <el-icon v-if="data.type == 0" color="var(--el-color-info)">
            <SuccessFilled/>
          </el-icon>
          <el-icon v-else-if="data.type == 1" color="var(--el-color-danger)">
            <QuestionFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 2" color="var(--el-color-warning)">
            <QuestionFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 3" color="var(--el-color-danger)">
            <WarnTriangleFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 4" color="var(--el-color-danger)">
            <WarningFilled/>
          </el-icon>
          <el-icon v-else-if="data.type == 5" color="var(--el-color-warning)">
            <WarningFilled/>
          </el-icon>
          <el-icon v-else-if="data.type == 6" color="var(--el-color-success)">
            <SuccessFilled/>
          </el-icon>
          <div>{{ node.label }}</div>
        </div>
      </slot>
    </template>
  </el-tree>
</template>
@@ -43,20 +57,20 @@
          type: 0,
          title: 'title',
          categoly: '2022-10-10',
          data: {},
        },
      ],
          data: {}
        }
      ]
    },
    loading: Boolean,
    loading: Boolean
  },
  emits: ['itemClick'],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title',
        label: 'title'
      },
      isLoading: this.loading,
      isLoading: this.loading
    };
  },
  computed: {
@@ -75,7 +89,7 @@
      for (const [key, value] of itemMap) {
        const i = {
          title: key,
          children: [],
          children: []
        };
        value.forEach((v) => {
          i.children.push(v);
@@ -92,11 +106,11 @@
        }
      });
      return list;
    },
    }
  },
  watch: {
    loading(nValue) {
      this.isLoading = nValue
      this.isLoading = nValue;
    },
    //当数据第一次更新时
    dataList(nValue) {
@@ -117,7 +131,7 @@
        }
        this.isLoading = false;
      }
    },
    }
  },
  methods: {
    handleNodeClick(data) {
@@ -131,12 +145,17 @@
      if (data.children == undefined) {
        this.$emit('itemClick', data);
      }
    },
  },
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tree {
  // background-color: aliceblue;
  // width: var(--el-aside-width, 200px)
}
.custom-tree-node {
  display: flex;
  align-items: center;