uniapp的多列选择器

直接粘贴~
javascript 复制代码
<template>
  <view class="container">
    <form>
      <picker mode="multiSelector" :range="multiArray" @change="onMultiChange" @columnchange="onMultiColumnChange">
        <view class="picker">
          <text>{{ multiArray[0][selectedIndex[0]] }}</text>
          <text class="iconfont icon-down"></text>
          <text>{{ multiArray[1][selectedIndex[1]] }}</text>
          <text class="iconfont icon-down"></text>
        </view>
      </picker>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      multiArray: [],     // 两列联动数据
      selectedIndex: [0, 0], // 当前选中的索引，市、区
      cityList: [        // 市、区数据，仅保留广州市和深圳市
        {
          name: "广州市",
          districtList: ["荔湾区", "越秀区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "增城区", "从化区"]
        },
        {
          name: "深圳市",
          districtList: ["罗湖区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区", "光明区", "大鹏新区"]
        },
		{
		  name: "xx市",
		  districtList: ["xx区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区", "光明区", "大鹏新区"]
		}
      ]
    }
  },
  created() {
    // 初始化两列联动数据
    this.multiArray = [
      this.cityList.map(city => city.name), // 市列表，广州市和深圳市
      this.cityList[0].districtList // 区列表，初始化为广州市的区
    ];
  },
  methods: {
    onMultiChange(e) {
      this.selectedIndex = e.detail.value;
      // 当用户选择市时，更新区数据
      const selectedCity = this.cityList[this.selectedIndex[0]];
      this.multiArray[1] = selectedCity.districtList;
      this.selectedIndex[1] = 0;
    },
    onMultiColumnChange(e) {
      const column = e.detail.column;
      const value = e.detail.value;
      if (column === 0) {
        // 当用户改变市时，更新区数据
        const selectedCity = this.cityList[value];
        this.multiArray[1] = selectedCity.districtList;
        this.selectedIndex[1] = 0;
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.picker {
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 20px;
}
.iconfont {
  margin-left: 10px;
}
</style>