移动端，树形数据的一种展示形式

若数据以卡片形式展示为例

与后端配合，返回如hasChildren字段，判断此数据是否有子节点，若是有子节点，则点击卡片头部显示‘>’符号，表示可点击卡片头部获取子节点数据。

上图最上方模拟面包屑，后端可返回卡片的全路径，将全路径处理为面包屑形式

        <view class="uni-breadcrumb" v-if="breadcrumbList.length > 0">
            <view class="uni-breadcrumb-item" v-for="(item, index) in breadcrumbList" :key="index">
                <text @click="handleBreadcrumbClick(item)" class="breadcrumb-item">
                    {{ item.label }}
                </text>
                <text v-if="index < breadcrumbList.length - 1" class="uni-breadcrumb-separator"> > </text>
            </view>
        </view>

获取卡片的id，传给后端，获取这个id的孩子节点数据，

const breadcrumbList = ref([])

//点击>的函数
    const getSubTask = (id) =>{

      breadcrumbList.value.length = 0
				if(res.data.list !== null){
					const nameList = res.data.list.task_name.split('>')
					const idList = res.data.list.task_guid.split('>')
					breadcrumbList.value.push({
						label : '返回',
						id : '0'
					})
					nameList.forEach((item, index)=>{
						breadcrumbList.value.push({
							label : item,
							id : idList[index]
						})
					})
				}

        ...获取子节点数据
    }

    const handleBreadcrumbClick = (item) => {
        getSubTask(item.id)
    }

    .uni-breadcrumb {
        width: 710rpx;
        overflow: auto;
        display: flex;
        margin: 20rpx 20rpx 0;
        .uni-breadcrumb-item {
            display: flex;
            align-items: center;  
            .breadcrumb-item {
                max-width: 300rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block
                
            }
            .breadcrumb-item:last-child {
                color: #5677fc;
            }
        }


        .uni-breadcrumb-separator{
            padding: 0 10rpx;
        }
    }