uniapp三级联动实现

uniapp官方组件
uniapp给定了五种模式
普通选择器，时间选择器，日期选择器，省市区选择器，多列选择器
官方文档省市区选择器不适用5+app、h5和支付宝小程序，必须适用插件
更多内容大家自己阅读文档

下面就直接上代码

<template><view class="content"><view class="uni-list"><view class="uni-list-cell"><view class="uni-list-cell-db"><picker @change="bindPickerChange" mode=selector :value="index" :range="coname"><view class="picker_box"><view class="text">一级分类</view><view class="uni-input"{{conameName}}</view></view></picker><picker @change="bindPickerChangeTwo" mode=selector :value="indexTwo" :range="conameTwo"><view class="picker_box"><view class="text">一级分类</view><view class="uni-input">{{conameName_two}}</view></view></picker><picker @change="bindPickerChange" mode=selector disabled :value="indexthree" :range="congread"><view class="picker_box"><view class="text">分数</view><view class="uni-input">{{grade}}</view></view></picker></view></view></view></view>
</template><script>import mer from "../../api/mer/mer.js"export default {data() {return {// 全部数据contentList: [],// 一级分类数据coname: [],// 二级分类所有数据contentListTwo: [],// 二级分类部分数据conameTwo: [],index: 0,indexTwo: 0,indexthree:0,// 二级分类idconameTwo_id: "",// 各项分数congread: [],// 一级选项名字conameName: "",// 二级选项名字conameName_two:"",// 三级分类的分数grade:''}},onLoad() {this.getcascade()},methods: {// 获取数据getcascade() {mer.getAllContent().then(res => {this.contentList = res.data.list// 拿到一级分类  给到this.conamethis.coname = this.contentList.map(item => {return item.coname})})},bindPickerChange(e) {// 如果切换清空第二层和第三层选择器this.conameName_two="",this.grade=""// 返回的id是数字，但是filter只能筛选字符串 所以把数字转化为字符串var id = e.detail.value.toString()let obj1 = this.contentList.filter(item => item.id === id)// 将二级分类数据this.contentListTwo = obj1[0].contentwoVoList// 把二级分类所有的coname拿到this.conameTwo = this.contentListTwo.map(item => {return item.coname})// 筛选某一项的名字this.conameName = this.contentList.filter(a => a.id == e.detail.value)[0].coname},bindPickerChangeTwo(e) {// 清空数组this.congread = []this.indexTwo = e.detail.valuelet obj2 = this.contentListTwo[e.detail.value];// 第二层分类的名字this.conameName_two=obj2.coname// 三级分类的分数this.grade = obj2.conGread// console.log(this.grade)// 将分数追加到congread数组里this.congread.push(obj2.conGread);}}}
</script><style lang="scss">.content {.uni-list {.uni-list-cell {.uni-list-cell-db {.picker_box {margin-top: 20rpx;display: flex;height: 90rpx;background-color: #fff;justify-content: space-between;align-items: center;padding: 0 25rpx;color: #666363;.text {display: flex;flex-shrink: 0;}.uni-input {}}}}}}
</style>

效果图如下

如果这篇文章对你有帮助，那就点个赞哦！！

uniapp三级联动实现相关推荐

uni-app三级联动笔记
uniapp官方组件picker uniapp使用三级联动picker,官方文档省市区选择器不适用5+app.h5和支付宝小程序,必须适用插件(日期.时间.三级联动picker)(mpvue-pick ...
uniapp 省市区三级联动
uniapp 省市区三级联动需求:小程序省市区三级联动,可在子节点存在时选择父节点(也就是说可以在区存在时选择市),同时满足可以根据不同用户权限展示出两级联动(列表无省),一级联动(列表无省市只有区 ...
【uniapp】引入vant完成一个地址栏省市区三级联动
图片如上,代码如下: <template><view class="address"><van- ...
支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
【案例】城市地址三级联动
注意点: 1.<option value=""></option> value值的设置 2.select的onchange事件 <!DOCTYP ...
微信小程序多项选择器_微信小程序三级联动之多列选择器
有些时候,三级联动业务场景并不只是全国地区选择,可能还涉及到自定义分类的三级联动,这时就需要使用微信的多列选择器. 如果只是一列字段,或者每次拖动一次都去服务端取,会比较容易. 如果想一次定义好jso ...
ios收货地址三级联动选择
这次的需求,是省市区三级联动选择,并且市的选择要根据省的id,然后区的选择要根据市的id 每次都要进行网络请求,关键代码,其实是 //监听轮子的移动 - (void)pickerView:(UIPic ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...

uniapp三级联动实现

uniapp三级联动实现相关推荐

最新文章

热门文章