vant picker+popup 自定义三级联动

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': '一组'
                }, {
                    'kid': 2,
                    'text': '二组'
                }, {
                    'kid': 3,
                    'text': '三组'
                }],
                '2': [{
                    'kid': 4,
                    'text': '四组'
                }, {
                    'kid': 5,
                    'text': '五组'
                }]
            }
            let column3 = {
                '1': [{
                    'kid': 1,
                    'text': '小明'
                }, {
                    'kid': 2,
                    'text': '小红'
                }, {
                    'kid': 3,
                    'text': '小刚'
                }],
                '2': [{
                    'kid': 4,
                    'text': 'Amy'
                }, {
                    'kid': 5,
                    'text': 'Sam'
                }],
                '3': [{
                    'kid': 4,
                    'text': 'Sion'
                }, {
                    'kid': 5,
                    'text': 'Juno'
                }],
                '4': [{
                    'kid': 6,
                    'text': 'Lucy'
                }, {
                    'kid': 7,
                    'text': 'Tom'
                }],
                '5': [{
                    'kid': 6,
                    'text': 'Iwan'
                }]
            }
            let columns = [];
            columns = [{
                    values: column1,
                    defaultIndex: 0 //默认选中项索引
                },
                {
                    values: [],
                    defaultIndex: 0
                },
                {
                    values: [],
                    defaultIndex: 0
                }
            ];
            this.stuColumn2 = column2;
            this.stuColumn3 = column3;
            this.stuLoad = columns;
        },
        stuConfirm(value, index) { // 下方弹出层点击确认时触发
            // value为各列选中值
            // index为各列选中的索引
            if (index.indexOf(0) > -1) {
                alert('请选择');
            } else {
                let content = value[0]['text'] + ' / ' + value[1]['text'] + ' / ' + value[2]['text'];
                this.student = content;
                this.stuShow = false;
            }
        },
        stuChange(picker, value, index) { // 选择器改变时触发
            // Picker 实例
            // value为当前选中值
            // index为当前列对应的索引,第一列index为0，第二列index为1，依次列推
            if (index == 0) { // 改变第一列的值
                let i = value[0]['kid'];
                let item = this.stuColumn2[i] ? this.stuColumn2[i] : [];
                if (item && item[0]['text'] != '请选择') {
                    item.unshift({
                        'kid': 0,
                        'text': '请选择'
                    })
                }
                picker.setColumnValues(1, item); // 给对应的列赋值，第一个参数为列的index值，第二个参数为列的values
            } else if (index == 1) {
                let i = value[1]['kid'];
                let item = this.stuColumn3[i] ? this.stuColumn3[i] : [];
                if (item.length != 0 && item[0]['text'] != '请选择') {
                    item.unshift({
                        'kid': 0,
                        'text': '请选择'
                    })
                }
                picker.setColumnValues(2, item);
            }
        }
    }
};
</script>

<style scoped>
.text {
    text-align: right;
}
</style>