效果
分析
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>