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>
|