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

//用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]].waterSortCodethis.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])}},}

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

用微信小程序写一个计算器
下面是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下. 页面部分 <view class='box'><view class='txt'>{{screenNum} ...
微信小程序系列（7）如何用微信小程序写一个论坛？贴心代码详解（五）删帖页【完结篇】
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序系列（4）如何用微信小程序写一个论坛？贴心代码详解（二）评论页
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序系列（6）如何用微信小程序写一个论坛？贴心代码详解（四）搜索页
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
用微信开发者小程序写一个加法计算器小程序
文章目录前言一.calculator.wxml代码二.calculator.js代码结果前言提示:用软件微信开发者小程序写一个加法计算器小程序一.calculator.wxml代码 &l ...
微信小程序，一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序，一个有局限的类似 React Native 轮子！
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
PHP进度条小程序,用微信小程序实现一个圆形的进度条
随着小程序的热度下降,更多的人已经开始静下心来开发微信小程序了,最近在开发一款微信小程序的过程中遇到了一个问题:如何用微信小程序实现一个圆形的进度条?整理一番后,记录下来与大家共享. 代码实现的思路原 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...

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

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

最新文章

热门文章