| | |
| | | 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> |
| | |
| | | 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: { |
| | |
| | | for (const [key, value] of itemMap) { |
| | | const i = { |
| | | title: key, |
| | | children: [], |
| | | children: [] |
| | | }; |
| | | value.forEach((v) => { |
| | | i.children.push(v); |
| | |
| | | } |
| | | }); |
| | | return list; |
| | | }, |
| | | } |
| | | }, |
| | | watch: { |
| | | loading(nValue) { |
| | | this.isLoading = nValue |
| | | this.isLoading = nValue; |
| | | }, |
| | | //当数据第一次更新时 |
| | | dataList(nValue) { |
| | |
| | | } |
| | | this.isLoading = false; |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | methods: { |
| | | handleNodeClick(data) { |
| | |
| | | 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; |