upicker三级联动,滑动几次就报错,定位不到问题?

2023-06-16 356 0

<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>

image.png
最后就只报这个错

看报错信息就是你的 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]]);
}

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?