uniapp 下拉框封装

子组件

 

<template>
<picker v-if="arr.length*1" @change="bindPickerChange" :value="opChange(num,arr,'value')" :range-key="'label'"
:range="arr">
<slot name="item">{{arr.length}}</slot>
</picker>
</template>

<script>
export default {
data() {
return {

}
},
props: {
arr: {
type: Array,
required: true,
default: function() {
return []
}
},
num: {
type: String,
default: ""
}
},
computed: {

},
methods: {
bindPickerChange: function(e) {
this.index = e.target.value
},
opChange(num, op) {
var shu = 0;
op.forEach((item, index) => {
if (num * 1 == item.value * 1) {
shu = index
}
});
console.log(shu)
return shu;
},
}
}
</script>

<style>
</style>

 

 

父组件

 

<pickers :arr='[{
label: "服务定金",
value: "1"
},
{
label: "阿姨工资",
value: "2"
}]'>
<view class="" slot="item">
1111
</view>
</pickers>