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>
相关推荐
2501_9160074713 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
砺能15 小时前
uniapp生成的app添加操作日志
前端·uni-app
2501_9159214318 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手18 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs19 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟19 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农19 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q196328847519 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
不知名的前端专家20 小时前
UniApp USB存储设备U盘操作、读写原生插件
uni-app
coldriversnow21 小时前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app