uniapp 省市区三级联动

1. uniapp 省市区三级联动

在uniapp中实现省市区三级联动的方法。首先，在根目录创建一个存放省市区js文件，定义省市区数据。然后，在页面中使用picker组件，设置mode为multiSelector，绑定省市区数据。通过监听picker的change和columnchange事件，实现省市区数据的联动选择。最后，将选择的省市区数据显示在页面上。该方法简单易用，适用于需要省市区选择的场景。

1.1. 组件city-picker.vue

javascript 复制代码

<template>
  <view>
    <picker class="city-picker-layout"
            mode="multiSelector"
            range-key="name"
            :range="array"
            :value="value"
            @change="bindPickerChange"
            @columnchange="columnchange">
      <slot></slot>
    </picker>
  </view>
</template>
<script>
import AllAddress from '/api/city'

let selectCode =  ['', '', '']
let selectValue = ['', '', '']
export default {
  name: 'modal',
  data() {
    return {
      value: [0, 0, 0],
      array: [],
      index: 0
    }
  },
  created() {
    this.initSelect()
  },
  props: {},
  methods: {
    // 初始化地址选项
    initSelect() {
      this.updateSourceDate() // 更新源数据
          .updateAddressDate() // 更新结果数据
      setTimeout(() => {
        this.$forceUpdate()  // 触发双向绑定
      }, 0)
    },
    // 地址控件改变控件
    columnchange(d) {
      this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
          .updateSourceDate() // 更新源数据
          .updateAddressDate() // 更新结果数据
          .$forceUpdate()  // 触发双向绑定
    },

    /**
     * 更新源数据
     * */
    updateSourceDate() {
      this.array = []
      this.array[0] = AllAddress.map(obj => {
        return {
          name: obj.name
        }
      })
      this.array[1] = AllAddress[this.value[0]]
          .cityList.map(obj => {
            return {
              name: obj.name
            }
          })
      this.array[2] = AllAddress[this.value[0]]
          .cityList[this.value[1]]
          .areaList.map(obj => {
            return {
              name: obj.name
            }
          })
      return this
    },

    /**
     * 更新索引
     * */
    updateSelectIndex(column, value) {
      let arr = JSON.parse(JSON.stringify(this.value))
      arr[column] = value
      if (column === 0) {
        arr[1] = 0
        arr[2] = 0
      }
      if (column === 1) {
        arr[2] = 0
      }
      this.value = arr
      return this
    },

    /**
     * 更新结果数据
     * */
    updateAddressDate() {
      selectCode[0] = this.array[0][this.value[0]].code
      selectCode[1] = this.array[1][this.value[1]].code
      selectCode[2] = this.array[2][this.value[2]].code
      selectValue[0] = this.array[0][this.value[0]].name
      selectValue[1] = this.array[1][this.value[1]].name
      selectValue[2] = this.array[2][this.value[2]].name
      return this
    },

    /**
     * 点击确定
     * */
    bindPickerChange(e) {
      this.$emit('change', {
        index: this.value,
        cityVale: selectValue,
        cityCode: selectCode,
        array: this.array
      })
      return this
    }
  }
}
</script>
<style lang="scss" scoped>
.city-picker-layout {
  display: flex;
  justify-content: space-between;
}
</style>

1.2. 页面cityPicker.vue

javascript 复制代码

<template>
  <view>
    <view class="content">
      <city-picker @change="change">
        <text class="text"> {{ txt }}</text>
      </city-picker>
    </view>
  </view>
</template>
<script>
import CityPicker from '/components/city-picker.vue'//引入自定义插件
export default {
  components: {
    CityPicker
  },
  data() {
    return {
      txt: '选择地址', //省市区选中的值
      title: 'Hello'
    }
  },
  onLoad() {

  },
  methods: {
    change(data) {
      console.log("data===",data)
      this.txt = data.cityVale.join('')
      console.log(data.cityVale.join(''))
    }
  }
}
</script>
<style>
.text{
  font-size: 16px;
  color: #2c3e50;
}
</style>

1.3. 数据city.js

javascript 复制代码

// An highlighted block
var foo = 'bar';