<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
</uni-card>
<uni-section title="本地数据" type="line" padding style="height: calc(100vh - 100px);">
<uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区"
:localdata="connectionOptions" v-model="classes"
@change="onchange" @nodeclick="onnodeclick"
>
</uni-data-picker>
</uni-section>
</view>
</template>
<script>
export default {
data() {
return {
classes: undefined,
connectionOptions:[]
}
},
onLoad() {
this.connectionOptions = [{
value: '管网已建成',
text: '管网已建成',
children: [{
value: '污水',
text: '污水',
children: [{
value: '污水新增项1',
text: '污水新增项1'
}]
}, {
value: '雨水',
text: '雨水',
children: [{
value: '雨水新增项1',
text: '雨水新增项1'
}, {
value: '雨水新增项2',
text: '雨水新增项2'
}, {
value: '雨水新增项3',
text: '雨水新增项3'
}]
}]
},
{
value: '临时排口部分',
text: '临时排口部分',
children: [{
value: '污水',
text: '污水',
children: [{
value: '污水新增项1',
text: '污水新增项1'
}]
}, {
value: '雨水',
text: '雨水',
children: [{
value: '雨水新增项1',
text: '雨水新增项1'
}, {
value: '雨水新增项2',
text: '雨水新增项2'
}, {
value: '雨水新增项3',
text: '雨水新增项3'
}]
}]
},
{
value: '规划排口部分',
text: '规划排口部分',
children: [{
value: '污水',
text: '污水',
children: [{
value: '污水新增项1',
text: '污水新增项1'
}, {
value: '污水新增项2',
text: '污水新增项2'
}]
}, {
value: '雨水',
text: '雨水',
children: [{
value: '雨水新增项1',
text: '雨水新增项1'
}, {
value: '雨水新增项2',
text: '雨水新增项2'
}, {
value: '雨水新增项3',
text: '雨水新增项3'
}, {
value: '雨水新增项4',
text: '雨水新增项4'
}]
}]
},
{
value: '污水管网未覆盖地区',
text: '污水管网未覆盖地区',
children: [{
value: '雨水',
text: '雨水',
children: [{
value: '雨水新增项1',
text: '雨水新增项1'
}, {
value: '雨水新增项2',
text: '雨水新增项2'
}, {
value: '雨水新增项3',
text: '雨水新增项3'
}]
}]
},
{
value: '雨水管网不满足过流',
text: '雨水管网不满足过流',
children: [{
value: '雨水',
text: '雨水',
children: [{
value: '雨水新增项1',
text: '雨水新增项1'
}]
}]
},
]
console.log('connectionOptions',this.connectionOptions)
},
methods: {
onnodeclick(e) {
console.log(e);
},
onpopupopened(e) {
console.log('popupopened');
},
onpopupclosed(e) {
console.log('popupclosed');
},
onchange(e) {
console.log('---------onchange:', e);
}
}
}
</script>
<style>
.title {
font-size: 14px;
font-weight: bold;
margin: 20px 0 5px 0;
}
.data-pickerview {
height: 400px;
border: 1px #e5e5e5 solid;
}
.popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
</style>
没有也许
- 发布:2022-11-22 17:28
- 更新:2024-07-04 15:14
- 阅读:265
uni-data-picker到第三级的时候就把全部第二级的第三级都显示出来,附件已上传
分类:uni-app
1 个回复
1***@163.com - miemie
我也遇到这个问题了,请问解决了吗