级联效果在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下拉菜单的组件,这个到底该怎么办。

相关推荐
by__csdn1 小时前
Vue3 setup()函数终极攻略:从入门到精通
开发语言·前端·javascript·vue.js·性能优化·typescript·ecmascript
天天扭码1 小时前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
一条可有可无的咸鱼1 小时前
企业招聘信息,企业资讯进行公示
java·vue.js·spring boot·uni-app
Luna-player2 小时前
在前端中,<a> 标签的 href=“javascript:;“ 这个是什么意思
开发语言·前端·javascript
lionliu05192 小时前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys2 小时前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript
奇舞精选2 小时前
GELab-Zero 技术解析:当豆包联手中兴,开源界如何守住端侧 AI 的“最后防线”?
前端·aigc
奇舞精选2 小时前
Vercel AI SDK:构建现代 Web AI 应用指南
前端·aigc
神仙别闹3 小时前
基于C语言实现B树存储的图书管理系统
c语言·前端·b树
玄魂3 小时前
如何查看、生成 github 开源项目star 图表
前端·开源·echarts