uni-app：实现picker下拉列表的默认值设置

效果

分析

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>