有什么方法可以使 uni-data-picker仅显示最后一级吗
nn3
- 发布:2023-08-30 14:00
- 更新:2023-09-01 15:04
- 阅读:1113
喜欢技术的前端 - QQ---445849201
可以使用自定义插槽
<uni-section title="自定义插槽" type="line">
<view class="uni-px-5 uni-pb-5">
<uni-data-picker v-slot:default="{ data, error, options }" title="请选择" :localdata="classDataTree" v-model="classValue">
<view class="input-border">
<view v-if="error" class="error">
<text>{{ error }}</text>
</view>
<view v-else-if="data.length" class="input-selected">
<view v-for="(item, index) in data" :key="index" class="selected-item">
<text v-if="index == data.length - 1">{{ item.text }}</text>
</view>
</view>
<view v-else><text>请选择</text></view>
</view>
</uni-data-picker>
</view>
</uni-section>
export default {
data() {
return {
nation: '汉族',
address: '110101',
// map: {
// text: "label",
// value: "value"
// },
classValue: '1-2',
classDataTree: [
{
text: '一年级',
value: '1-0',
children: [
{
text: '1.1班',
value: '1-1'
},
{
text: '1.2班',
value: '1-2'
}
]
},
{
text: '二年级',
value: '2-0',
children: [
{
text: '2.1班',
value: '2-1'
},
{
text: '2.2班',
value: '2-2'
}
]
},
{
text: '三年级',
value: '3-0',
disable: true
}
]
};
},
methods: {
onnodeclick(e) {
console.log('nodeclick', e);
},
onpopupopened(e) {
console.log('onpopupopened');
},
onpopupclosed(e) {
console.log('onpopupclosed');
},
onchange(e) {
console.log('onchange', e.detail.value);
}
}
};