在使用uni-app的Picker选择器时，有时选择器的默认选择是后台传递的参数进行决定，或者是上一个界面传递过来的参数进行默认展示，我们该怎么解决呢？
我这里展示上一个界面传递参数改变picker的默认选择
首先进行传参
一、界面1
盒子部分：
<view
class="carbox"
v-for="item in carList"
:key="item.type"
@click="getadd(item.type)"
>
数据部分：
data() {
return {
carList: [
{
flag: "事假",
tips: "按小时请假",
type: "01",
dotColor: "#F0AD00",
},
{
flag: "调休",
tips: "按小时请假",
type: "02",
dotColor: "#4C84FF",
},
{
flag: "病假",
tips: "按小时请假",
type: "03",
dotColor: "#FD5461",
},
{
flag: "年假",
tips: "按半天请假",
type: "04",
dotColor: "#29C293",
},
{
flag: "产假",
tips: "按天请假",
type: "05",
dotColor: "#F0AD00",
},
{
flag: "陪产假",
tips: "按天请假",
type: "06",
dotColor: "#4C84FF",
},
{
flag: "婚假",
tips: "按天请假",
type: "07",
dotColor: "#F0AD00",
},
{
flag: "例假",
tips: "按半天请假",
type: "08",
dotColor: "#29C293",
},
{
flag: "丧假",
tips: "按天请假",
type: "09",
dotColor: "#FD5461",
},
{
flag: "哺乳假",
tips: "按小时请假",
type: "10",
dotColor: "#F0AD00",
},
],
};
},
//进行传参
methods:{
getadd(type){
uni.navigateTo({
url:`./home?type=${type}`//目标路由
})
}
}
二、界面2
盒子部分：
<!-- 选择器 -->
<view class="type">
<picker @change="(e) => bindPickerChange(e,'leavetype')" :value="leaveindex" :range="listData"
:range-key="leavevalue">
<view class="picktxt">{{listData[leaveindex][leavevalue]}}</view>
</picker>
</view>
data数据部分：
data() {
return {
// 请假类型
leaveindex: 0,
leavevalue: "text",
//定义接收参数的值
typeid：""，
//picker数据列表
listData: [{
text: "事假",
type: "01"
},
{
text: "调休",
type: "02"
},
{
text: "病假",
type: "03"
},
{
text: "年假",
type: "04"
},
{
text: "产假",
type: "05"
},
{
text: "陪产假",
type: "06"
},
{
text: "婚假",
type: "07"
},
{
text: "例假",
type: "08"
},
{
text: "丧假",
type: "09"
},
{
text: "哺乳假",
type: "10"
},
],
}
}，
//接收参数
onLoad(e){
this.typeid = e.type
console.log(this.typeid)
},
mounted() {
this.leaveindex = this.listData.findIndex((item) => item.type === this.typeid);//根据findIndex方法查找对应下标进行匹配
},
methods: {
bindPickerChange(e, type) {
if (type == 'leavetype') {
this.leaveindex = e.target.value
}
},
}