52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<template>
|
|
<view class="tree-container">
|
|
<view v-for="item in nodeData" :key="item.id">
|
|
<view class="tree-item" :style="{ backgroundColor: item.id == selectedNode.id ? '#4b93ff' : '' }" @click.stop="toCurrentNode(item)">
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
|
|
<shop-categary-tree
|
|
v-model="selectedNode"
|
|
v-if="item.children && item.children.length"
|
|
:node-data="item.children"
|
|
:style="{ marginLeft: `${getLevel() * 60}rpx` }"
|
|
@currentNode="(v) => emit('currentNode', v)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ShopCategaryTree from "./shop-categary-tree.vue"
|
|
|
|
defineProps({
|
|
nodeData: {
|
|
type: Array<any>,
|
|
default: () => [],
|
|
},
|
|
})
|
|
const emit = defineEmits(["currentNode"])
|
|
const selectedNode = defineModel<any>("modelValue")
|
|
|
|
const toCurrentNode = (item) => {
|
|
// emit("currentNode", item)
|
|
selectedNode.value = item
|
|
}
|
|
|
|
const getLevel = () => {
|
|
return 1
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tree-container {
|
|
padding: 0 40rpx;
|
|
}
|
|
.tree-item {
|
|
border-bottom: 1rpx solid #e4e7ed;
|
|
display: flex;
|
|
padding: 10rpx 0 10rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
</style>
|