uni-app微信小程序，写一个级联查询

最新推荐文章于 2024-03-28 18:29:41 发布

lsklike

最新推荐文章于 2024-03-28 18:29:41 发布

阅读量375

点赞数 1

分类专栏： uniapp 文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/lsklike/article/details/126452001

版权

uniapp 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

//用picker这个标签,mode="multiSelector"
<view class="common room-expense">
						<view class="price">水表类型</view>
						<!-- 请选择水电价> -->
						<view class="promtprice">
							<view class="uni-list">
								<picker mode="multiSelector" @change="waterclassifyChange" @columnchange="watercolumnchange"
									:range="waterclassifyArr" :range-key="'Watertypename'" :value="waterclassifyIndex">
									<view id="watertypestyle" :class="Watertypename == '请选择水表类型'?'default-class':'active-class'">
										{{Watertypename}}
									</view>
								</picker>
							</view>
						</view>
					</view>
//在data中写一个数组嵌套就行,或者直接用接口的数据
waterdataSource: [{
    id: 1,
    Watertypename: '西力',
    child: [{
        id: 2,
        Watertypename: '联通NB远程无阀冷水表',
        waterSortCode: '28',
        waterManufacturer: '1'
    },
            {
                id: 3,
                Watertypename: '联通NB远程阀控冷水表',
                waterSortCode: '29',
                waterManufacturer: '1'
            }]
}],
Watertypename:'请选择水表类型',
waterclassifyArr: [[],[]], // 水表picker - 数据源
waterclassifyIndex: [0,0], // 水表picker - 索引
waterchildArr: [], // 水表二级分类数据源
//在方法中
 methods: {
     // 获取数据源并分出一级二级
			getwaterAllClassify() {
				let waterdata = this.waterdataSource.length;
			
				for (let i = 0; i < waterdata; i++) {
					// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
					this.waterchildArr.push(this.waterdataSource[i].child)
				};
			
				// 一级分类的数据源
				this.waterclassifyArr[0] = this.waterdataSource;
			
				// 第一次打开时，默认给一级分类添加它的二级分类
				this.waterclassifyArr[1] = this.waterchildArr[0]
			},
			// 选择商品分类
			waterclassifyChange(e) {
				let value = e.target.value;
				this.waterclassifyIndex = value;
			
				if (this.waterclassifyArr[0].length != 0) {
					this.Watertypename = this.waterclassifyArr[0][this.waterclassifyIndex[0]].Watertypename
				};
				//这里可以拿到你想拿到的字段数据，最后提交到接口就行
				if (this.waterclassifyArr[1].length != 0) {
					this.Watertypename += ',' + this.waterclassifyArr[1][this.waterclassifyIndex[1]].Watertypename
				}
				if (this.waterclassifyArr[1].length != 0) {
					this.waterSortCode = this.waterclassifyArr[1][this.waterclassifyIndex[1]].waterSortCode
					this.waterManufacturer  = this.waterclassifyArr[1][this.waterclassifyIndex[1]].waterManufacturer   
				}
			},
			
			// 获取二级分类
			watercolumnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// 在小程序中直接赋值无效  H5 可直接赋值
					// this.classifyArr[1] = this.childArr[e.detail.value]
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.waterclassifyArr, 1, this.waterchildArr[e.detail.value])
				}
			},
 }