<template>
<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @close="close"></u-picker>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
},
data() {
return {
columns: [
// ['中国', '美国'],
// ['深圳', '厦门', '上海', '拉萨']
["天津市", "山东省", "河北省", "辽宁省"], ["滨海新区"], ["全市", "汉沽", "塘沽", "大港", "天津临港经济区", "天津南港工业区"]
],
columnData: [
["滨海新区"], ["东营", "威海", "日照", "滨州", "潍坊", "烟台", "青岛"], ["唐山", "沧州", "秦皇岛"], ["丹东", "大连", "盘锦", "营口", "葫芦岛", "锦州"]
],
prefectures: [[["全市", "汉沽", "塘沽", "大港", "天津临港经济区", "天津南港工业区"]], [["全市", "刁口", "黄河口", "广利港", "东营港", "新户", "埕口"], ["全市", "乳山", "文登", "石岛", "成山头", "威海市区"], ["全市", "日照市区", "岚山区"], ["全市", "北五岛", "烟台开发区", "无棣", "北海新区", "沾化"], ["全市", "昌邑"], ["全市", "莱州", "龙口", "长岛", "蓬莱", "南五岛"], ["全市", "青岛市区", "即墨", "胶州湾", "黄岛"]], [["全市", "乐亭", "曹妃甸"], ["全市", "岐口", "黄骅"], ["全市", "山海关", "海港区", "昌黎"]], [["全市"], ["全市"], ["全市"], ["全市"], ["全市", "绥中"], ["全市"]]]
}
},
methods: {
changeHandler(e) {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
indexs,
// 微信小程序无法将picker实例传出来,只能通过ref操作
picker = this.$refs.uPicker
} = e
// 当第一列值发生变化时,变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例,变化第二列对应的选项
picker.setColumnValues(1, this.columnData[index]);
picker.setColumnValues(2, this.columnData[indexs[0]][indexs[1]]);
picker.setColumnValues(2, this.prefectures[indexs[0]][indexs[1]]);
// picker.setColumnValues(2, this.prefectures[indexs[0]][indexs[1]]);
} if (columnIndex === 1) {
picker.setColumnValues(2, this.prefectures[indexs[0]][indexs[1]]);
}
},
// 回调参数为包含columnIndex、value、values
confirm(e) {
this.$emit("confirm", e)
},
close() {
this.$emit("close")
}
}
}
</script>
最后就只报这个错
看报错信息就是你的 page/menu/city.vue
文件出现问题,盲猜一个切换城市或者省份的时候,没有清空当前已经选择的下一级数据。然后同时因为载入下一级区域信息把可选项数组清空了。
另外先把你的这块代码注释一下看看是否还继续出现报错信息。如果没有的话,判断一下 indexs
是否为数组就好。
// 当第一列值发生变化时,变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例,变化第二列对应的选项
picker.setColumnValues(1, this.columnData[index]);
picker.setColumnValues(2, this.columnData[indexs[0]][indexs[1]]);
picker.setColumnValues(2, this.prefectures[indexs[0]][indexs[1]]);
// picker.setColumnValues(2, this.prefectures[indexs[0]][indexs[1]]);
} if (columnIndex === 1) {
picker.setColumnValues(2, this.prefectures[indexs[0]][indexs[1]]);
}