uview u-dropdown 选中的值不能在title显示出
时间: 2024-03-05 20:53:40 浏览: 135
解决ie6 select的title不能显示的问题
3星 · 编辑精心推荐
如果你希望在 uview u-dropdown 组件的标题栏中显示选中的值,可以在 `onSelect` 方法中修改 `title` 属性,示例代码如下:
```
<template>
<view>
<u-dropdown :list="list" @select="onSelect" :title="selectedText"></u-dropdown>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ text: '选项1', value: 'value1' },
{ text: '选项2', value: 'value2' },
{ text: '选项3', value: 'value3' },
],
selectedValue: null,
selectedText: '请选择', // 默认显示的标题
};
},
methods: {
onSelect(item) {
this.selectedValue = item.value;
this.selectedText = item.text; // 修改标题
console.log('选中的值:', this.selectedValue);
},
},
};
</script>
```
在代码中,我们新增了一个 `selectedText` 变量作为 uview u-dropdown 组件标题的默认值,并在 `onSelect` 方法中修改了 `selectedText` 的值为当前选中的选项文本,从而实现了在标题中显示选中的值。
阅读全文