uniapp picker组件实现二级联动

最新推荐文章于 2025-09-18 11:47:43 发布

原创

最新推荐文章于 2025-09-18 11:47:43 发布 · 7.8k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了一种基于微信小程序的多级联动选择器实现方案。通过后端接口获取分类数据，并利用Vue.js进行前端展示。文章详细展示了如何在用户选择一级分类时动态更新二级分类数据，同时记录所选分类。

在这里插入图片描述
效果图如上

html

<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index" :range="array"
	 range-key="title">
	<view class="uni-input">{
  
  {title}}</view>

</picker>

<script>
	export default {
		data() {
			return{
				index: [0, 0],
				array: [[],[]],
				childArr: [], // 二级分类数据源
				title: '请选择',
			}
		},
		methods: {
			// 任务分类
			getCate() {
				this.Get('请求的接口地址').then((res) => {
					if (!res.err) {
						// 返回的数据格式
						// [
							// {id: 4, title: "悬赏", desc: "", child: [{id: 10, title: "现金悬赏", desc: ""}]}
						// ]
						// 一级分类的数据源
						this.array[0] = res.result
						// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
						this.childArr = res.result.map((item) => item.child)
						// 第一次打开时，默认给一级分类添加它的二级分类
						this.a