95 lines
1.9 KiB
Vue
95 lines
1.9 KiB
Vue
<template>
|
||
<view class="tree-container">
|
||
<view v-for="(node, index) in data" :key="index" class="tree-node">
|
||
<!-- 修改：添加库存数显示 -->
|
||
<view class="node-content" @click="handleNodeClick(node)">
|
||
<text class="node-label">{{ node[defaultProps.label] }}</text>
|
||
<!-- 关键：只在最后一级节点显示库存数 -->
|
||
<text v-if="!node[defaultProps.children] && node.storageNum" class="storage-num">
|
||
（{{ node.storageNum }}）
|
||
</text>
|
||
</view>
|
||
<!-- 始终显示子节点 -->
|
||
<view class="children-container">
|
||
<leo-tree :data="node[defaultProps.children]" :defaultProps="defaultProps" @node-click="handleNodeClick"></leo-tree>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'leoTree',
|
||
props: {
|
||
data: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
defaultProps: {
|
||
type: Object,
|
||
default: () => ({
|
||
id: 'id',
|
||
children: 'children',
|
||
label: 'label'
|
||
})
|
||
},
|
||
// 添加默认展开所有节点的属性
|
||
defaultExpandAll: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
methods: {
|
||
handleNodeClick(node) {
|
||
this.$emit('node-click', node)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tree-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.tree-node {
|
||
padding: 4rpx 0;
|
||
}
|
||
|
||
.node-content {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12rpx 16rpx;
|
||
cursor: pointer;
|
||
font-size: 28rpx;
|
||
/* 添加：让标签和库存数在一行显示 */
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.node-content:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.node-label {
|
||
flex: 1;
|
||
color: #333;
|
||
}
|
||
|
||
/* 新增：库存数样式 */
|
||
.storage-num {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
/* 移除三角图标样式 */
|
||
.arrow-icon {
|
||
display: none !important;
|
||
}
|
||
|
||
.children-container {
|
||
padding-left: 32rpx;
|
||
border-left: 1rpx solid #e8e8e8;
|
||
margin-left: 16rpx;
|
||
}
|
||
</style> |