vant picker+popup 自定义三级联动案例
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了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': '一组'
}, {
'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>
补充知识：vue vant-picker选择器的使用，及数据结构的写法
vant-picker组件columns属性接收的是一个数组，如官方例子中：
它的数组是子项是一个简单是字符，但通常我们真实的数据子项都是对象，如：
colums:[ {name:'张三',age:18},{name:'李四',age:28}]
那么像这样的数组该怎么显示呢， vant-picker的value-key属性就是解决这个问题的，如我要使用上面的数组，那么vant-picker
就是这样
另外，如果数组中的子项含有键名为'text',那么value-key也可以不用设置，组件会默认取这个键名，如colums:[ {text:'张三',age:18},{text:'李四',age:28}]
以上这篇vant picker+popup 自定义三级联动案例就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。