当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 161861提问 提问时间:2023-10-28 19:23:41阅读次数: 61

最佳答案 问答题库618位专家为你答疑解惑

效果

分析

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>

 

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"uni-app:实现picker下拉列表的默认值设置":http://eshow365.cn/6-27054-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!