效果
分析
1、在data
中将index8
的初始值设置为-1,表示未选择任何选项:
index8: -1, //选择的下拉列表下标
2、在bindPickerChange8
事件处理函数中添加条件判断。如果选择的值是-1,则将this.index8
设置为"请输入",否则将其设置为选择的下标值
bindPickerChange8: function(e) {
if (e.detail.value === -1) {
this.index8 = '请输入';
} else {
this.index8 = e.detail.value;//更新选择的下拉下标
this.ifname = this.selectDatas8[e.detail.value]; // 更新选择的数据
}
// 其他逻辑...
}
3、在模板中使用{{selectDatas8[index8]}}
来显示选择的值。如果index8
为-1,则会显示"请输入"
{{index8 === -1 ? '请输入' : selectDatas8[index8]}}
完整代码
<template>
<view>
<picker style="border:1px solid black" name="ifname" @change="bindPickerChange8" :value="index8" :range="selectDatas8">
<view>
{{index8 === -1 ? '请输入' : selectDatas8[index8]}}
</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
index8: -1, //选择的下拉列表下标,
selectDatas8: ['ETH0', 'ETH1', 'WLAN1', 'WLAN2'], //下拉数组
ifname: '', //网口选择
};
},
methods: {
//下拉列表选择模式
bindPickerChange8: function(e) {
console.log('picker发送选择改变,携带下标为', e.detail.value)
console.log('picker发送选择改变,携带值为' + this.selectDatas8[e.detail.value])
if (e.detail.value === -1) {
this.index8 = '请输入';
} else {
this.index8 = e.detail.value;//更新选择的下拉下标
this.ifname = this.selectDatas8[e.detail.value]; // 更新选择的数据
}
},
},
};
</script>
<style>
</style>