vant picker+popup 自定义三级联动案例自定义三级联动案例
picker选择器的数据由columns属性控制，columns中有几个元素就代表该选择器有多少级，通过change方法来给对应列赋
值。
columns = [{
values: column1, // 对应列的值
defaultIndex: 0, // 默认选中项索引
className: 'class1' // 对应列的类名
},
{
values: [],
defaultIndex: 0,
className: 'class2'
},
{
values: [],
defaultIndex: 0,
className: 'class3'
}
];
demo
<template>
<div class="form">
<van-row type="flex" justify="center" align="center" style="padding-top:10px">
<van-col span="5" class="text">自定义三级联动</van-col>
<van-col span="19">
<van-field v-model="student" placeholder="请选择" @click="stuShow = true" :readonly="true" />
</van-col>
</van-row>
<!-- 底部弹出 -->
<van-popup v-model="stuShow" position="bottom" :style="{ height: '40%' }">
<van-picker :columns="stuLoad" @confirm="stuConfirm" @change="stuChange" @cancel="stuShow = false" show-toolbar />
</van-popup>
</div>
</template>
<script>
export default {
name: "Form",
data() {
return {
student: '',
stuShow: false,
stuLoad: [],
stuColumn1: [],
stuColumn2: [],
stuColumn3: [] };
},
created() {
this.makeData(); // 页面加载时给选择框赋初始值
},
methods: {
makeData() { // 模拟数据，生产环境用axios获取数据
let column1 = [{
'kid': 0,
'text': '请选择'
}, {
'kid': 1,
'text': '一年级'
}, {
'kid': 2,
'text': '二年级'
}];
let column2 = {
'1': [{
'kid': 1,
'text': '一组'
}, {
资源评论
weixin_415681572022-12-11资源很受用，资源主总结的很全面，内容与描述一致，解决了我当下的问题。
