uniapp转微信小程序开发,使用vant下拉菜单和picker组件,实现动态设置选项
实现以上效果
<van-dropdown-item title="部门" @open="getDepartmentName">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@change="onChange"
/>
</van-dropdown-item>
data() {
return {
value1: 0,
value2: 'a',
columns: [
{
values: ['国家级','省级','市级','区/镇级'],
className: 'column1',
},
{
values: ['1','2'],
className: 'column2',
defaultIndex: 2,
},
],
}
},
- 先在mounted中请求默认选中的数据:
computed:{ ...mapGetters('home',['departNameList']) }, mounted() { let data = { "policyRank":`${this.columns[0].values[0]}` } this.$store.dispatch('home/getDepartmentList',data) }, methods: { getDepartmentName(){ console.log('准备发请求') this.columns[1].values=this.departNameList }, }
- 触发picker的change事件,再发送请求,获取右侧的数据
onChange(event) { const { picker, value, index } = event.detail; console.log(value[0]) let data = { "policyRank":`${value[0]}` } this.$store.dispatch('home/getDepartmentList',data) picker.setColumnValues(1, this.departNameList); },
- 监听获取的数据,在computed更改是,将数据赋值给column
watch:{ departNameList:{ handler(newQuestion, oldQuestion){ this.columns[1].values = newQuestion } } },