级联效果在Uview2.0中的实现

级联效果在Uview2.0中的实现。

假设需要一个【省,市,区】的三级联动,你会怎么用uview2.0做?

首先,回顾其他组件库,基本上都让你传递一个树状数组,然后级联选择啥的都不需要操心。一般这类组件都叫做cascader,但是uview2.0并未有cascader组件,你只能选择使用picker。

那么picker咋用呢?

首先,注意这俩属性,分别代表每列数据&每列选中的下标,后面回显会用到。

其次,在change函数,会在每次滑动选项后触发。

通过解构出的columIndex可以判断是第几列被滑动了,而index则是代表该列目前被选中的下标是几。

所以咱们理清逻辑

  • 当第一列滑动的时候,咱们需要决定第二列、第三列的数据到底显示什么
  • 当第2列滑动的时候,咱们需要决定第3列的数据到底显示什么
scss 复制代码
picker.setColumnValues(1, children1);
picker.setColumnValues(2, children2)

//这里的children1,children2都是咱们自行生成的数组,形如【'a','b','c'】

最后,咱们选择完成后触发confirm,此时务必记得改变columns和defaultIndex的值,不然下次打开仍是初始值,没有回显。

最后的最后,我还有个困惑,uview2.0并没有dropdown下拉菜单的组件,这个到底该怎么办。

相关推荐
q***311431 分钟前
【Springboot3+vue3】从零到一搭建Springboot3+vue3前后端分离项目之后端环境搭建
android·前端·后端
q***125335 分钟前
Plugin ‘org.springframework.bootspring-boot-maven-plugin‘ not found(已解决)
java·前端·maven
攻城狮CSU36 分钟前
C# 异步方法
开发语言·前端·c#
tyro曹仓舒36 分钟前
干了10年前端,才学会使用IntersectionObserver
前端·javascript
S***y3961 小时前
前端微前端框架对比,qiankun与icestark
前端·前端框架
Wect1 小时前
学习React-DnD:实现多任务项拖拽-useDrop处理
前端·react.js
Mintopia1 小时前
Trae Coding - 「Excel 秒变海报」—— 上传 CSV,一句话生成可打印信息图。
前端·人工智能·trae
晴殇i2 小时前
CSS 相对颜色:告别 180 个颜色变量的设计系统噩梦
前端·css
MegatronKing2 小时前
Reqable 3.0版本云同步的实践过程
前端·后端·测试
李剑一2 小时前
我用Trae生成了一个Echarts 3D柱状图的Demo
前端·vue.js·trae