uniapp省市区使用picker自定义数据

这两天有个需求，需要使用选择省市区，于是很自然的选择了uniapp的picker组件。

<picker mode="region" :value="areaRange" @change="handleAreaChange">
    <view class="input">{{ selectedArea.join(' ') }}</view>
</picker>

看起来很简单，一分钟搞定呀，picker的mode="region"就好了呀。

但是，id提交到后端的时候，告诉我说id不对，原来，原先公司有自己定义好的省市区数据，那么没办法，只能前端改了。

看来接口返回的省市区数据，是一维数组，多层嵌套的结构的。如下，简单截个片段：

{
  "status_code": 0,
  "status_msg": "",
  "data": {
    "items": [
      {
        "id": 2,
        "name": "辽宁省",
        "region_id": 210000,
        "children": [
          {
            "id": 3,
            "name": "沈阳市",
            "region_id": 210100,
            "children": [
              {
                "id": 4,
                "name": "经济技术开发区",
                "region_id": 210190,
                "children": []
              },

而如果picker的mode改成multiSelector 的话接收的是二维数组，

想过使用第三方的插件，例如uni-data-picker等，但是我的省市区是在一个弹窗里的，会造成uni-data-picker弹出的弹窗只是撑满了弹窗的全屏，而不是页面，样式上很难看。

经过综合分析，还是觉得将返回的数据改成二维数组来得方便些，展示效果也会更好，于是封装如下。

<template>
  <div>
    <view class="form-item">
      <view class="label">选择地区:</view>
      <picker mode="multiSelector" :value="areaRange" :range="typeData" @change="changePickerOrigin"
        @columnchange="columnPickerOrigin">
        <view class="input">{{ selectedArea.join(' ') }}</view>
      </picker>
    </view>
  </div>
</template>

<script>
const cityData = require('@/utils/regin.json')

export default {
  data() {
    return {
      selectedArea: ["请选择", "请选择", "请选择"],
      selectedCode: [],
      regionArray: cityData.data.items,
      areaRange: [0, 0, 0],//picker的位置
      typeData: [[], [], []], // picker的选择数据
      typeDataIds: [[], [], []], // 存储id
      areaRange0: 0,//第一列变化的位置
      typeData1: [],//存放市级数据
      typeData2: [],//存放县级数据
      typeDataId1: [],
      typeDataId2: [],
    }
  },
  mounted() {
    this.getTree(cityData.data.items)
  },
  methods: {
    getTree(res) {
      res.forEach((item, index) => {
        this.typeData[0].push(item.name)
        this.typeDataIds[0].push(item.region_id)

        if (index == 0 && item && item.children) {
          item.children.forEach((item1, index1) => {
            this.typeData[1].push((item1.name))
            if (index1 == 0) {
              item1.children.forEach((item2, index2) => {
                this.typeData[2].push((item2.name))
              })
            }
          })
        }
        if (item && item.children) {
          let typeData1 = [],typeData22 = [];
          let typeDataId1 = [],typeDataId22 = [];

          item.children.forEach((item2, index2) => {
            typeData1.push((item2.name))
            typeDataId1.push((item2.region_id))

            if (item2 && item2.children) {
              let typeData2 = [];
              let typeDataId2 = [];

              item2.children.forEach((item3, index3) => {
                typeData2.push(item3.name)
                typeDataId2.push(item3.region_id)
              })
              typeData22.push(typeData2)
              typeDataId22.push(typeDataId2)
            }
          })
          this.typeData1.push(typeData1)
          this.typeData2.push(typeData22)

          this.typeDataId1.push(typeDataId1)
          this.typeDataId2.push(typeDataId22)
        }
      })

      console.log(1111, this.typeData)
    },
    //列数据变化的时候
    columnPickerOrigin(e) {
      const column = e.detail.column
      const value = e.detail.value
      if (column == 0) {
        this.areaRange0 = value
        this.$set(this.typeData, 1, this.typeData1[value])
        this.$set(this.typeData, 2, this.typeData2[value][0])

        this.typeDataIds.splice(1,1,this.typeDataId1[value])
        this.typeDataIds.splice(2,1,this.typeDataId2[value][0])
        this.areaRange = [value, 0, 0]
      } else if (column == 1) {
        this.$set(this.typeData, 2, this.typeData2[this.areaRange0][value])
        this.typeDataIds.splice(2,1,this.typeDataId2[this.areaRange0][value])
        this.areaRange = [this.areaRange0, value, 0]
      }else if(column == 2){
        this.areaRange[2] = value
      }

      console.log(this.areaRange)
    },
    // 点击确认的时候
    changePickerOrigin(e) {
      let provinceName = this.typeData[0][e.detail.value[0]]
      let cityName = this.typeData[1][e.detail.value[1]]
      let areaName = this.typeData[2][e.detail.value[2]]

      let province = this.typeDataIds[0][this.areaRange[0]]
      let city = this.typeDataIds[1][this.areaRange[1]]
      let area = this.typeDataIds[2][this.areaRange[2]]

      this.selectedArea = [provinceName,cityName,areaName]
      this.selectedCode = [province,city,area]
    },
  }
}
</script>

<style lang="scss" scoped></style>