关于mintui中picker的二级联动

马忠志发布于2019-08-22 16:40 / 591人阅读

摘要：今天做的项目有个关于选择部门再选择人员的功能，我用到了的。根据的会发现每次，函数都会被调用三次。大概是默认里面有三个。经过研究，可以换一种写法添加两个取消确定选完一级，再获取二级内容

今天做的项目有个关于选择部门再选择人员的功能，我用到了min-ui的picker。
根据mintui的api


export default {
  methods: {
    onValuesChange(picker, values) {
      console.log("change");
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06"],
          className: "slot1",
          textAlign: "right"
        }, {
          divider: true,
          content: "-",
          className: "slot2"
        }, {
          flex: 1,
          values: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06"],
          className: "slot3",
          textAlign: "left"
        }
      ]
    };
  }
};

会发现每次change，onValuesChange函数都会被调用三次。大概是mintui默认里面有三个picker。
经过研究，可以换一种写法,添加两个picker


    
        取消
        确定

选完一级，再获取二级内容

data () {

return {
    slots: [
        {
          flex: 1,
          values: [],
          defaultIndex:0,
          className: "slot1",
          textAlign: "center"
        }, {
          divider: true,
          content: "-",
          className: "slot2",
          textAlign: "right"
        }
    ],
    slots1:[
        {
          flex: 1,
          values: [],
          defaultIndex:1,
          className: "slot3",
          textAlign: "center"
        }
    ]
}

}

onValuesChange(picker,values){
    if(values[0] && values[0].userlist != undefined){
        this.slots1[0].values = [];
        for(var key in values[0].userlist) {
            this.slots1[0].values.push(values[0].userlist[key]);
        }
    }
}

云服务器 GPU云服务器关于JAVA中顺序IO的基本操作省市二级联动数据二级联动二级联动菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94547.html

动手封装一个React Native多级联动

摘要：如果只有用到里面非常简单的功能，很快就可以开发好，建议自己开发，没必要引用一个庞大的包，如果要特殊定制的话，就只有自己开发。背景肯定是最近有一个项目，需要一个二级联动功能了！本来想封装完整之后，放在github上面赚星星，但发现市面上已经有比较成熟的了，为什么我在开发之前没去搜索一下（项目很赶进度），泪崩啊，既然已经封装就来说说过程吧任务开始一. 原型图或设计图在封装一个组件...

Coly 2019-08-23 12:02 评论0 收藏0
vue移动端侧滑面板组件

摘要：里边涉及到的指令是自定义的指令，为了处理移动端的点击操作，我还整理了一片陋文移动点击长按滑动指令然后这个组件的源码我放在了我出来的项目上谢谢各位品尝，以下这段都是废话，请跳过公司移动端开发平台进行了大变革，前端架构由DCloud大生态转换为VUE，所以移动端的UI组件库从MUI改为使用MintUI，然后开始大刀阔斧的把MintUI组件改成MUI组件的样子，然后发现少了几个较为常用的...

TNFE 2019-08-22 16:21 评论0 收藏0
演示微信小程序地区选择伪五级联动

　　在项目中，要求微信小程序的地区可以选择伪五级联动　　展示如下　　这里采用的是自定义多列选择器picker mode="multiSelector"　　<viewclass="section"> 　　<viewclass="section__title">多列选择器</view> 　　<pick...

3403771864 2022-11-08 23:27 评论0 收藏0
真香警告：即使不用饿了么订餐，也请务必收藏好该库！

摘要：架构在编写第三方库的最佳实践使用者无需了解内部逻辑，通过实现接口即可轻松完成个性化配置。绝不使用，绝不使用奇技淫巧编写艰深晦涩的代码。由来 LinkageRecyclerView 是一款基于 MVP 架构开发的二级联动列表控件。它是因 RxJava 魔法师这个项目的需求而存在。在最初寻遍了 GitHub 也没有找到合适的开源库（高度解耦、可远程依赖）之后，我决心研究参考现有开源项目关于...

hightopo 2019-05-23 17:30 评论0 收藏0
thinkphp+jquery+ajax二级联动使用心得

摘要：注意和，供选择器使用所属分类请选择分类所属课程要先引用后端代码前期遍历，第一个下拉菜单的值从数据库取出子课程添加处理的方法子课程添加下拉菜单二级联动感觉写的很详细啦，欢迎和我一起探讨哦，么么哒一、想实现的效果：用thinkphp+jquery+ajax实现二级联动，当所属分类选择妈咪英语时，下面所属课程会自动列出妈咪英语下的子类。类似省市二级联动 showImg(https:/...

Invoker 2019-06-27 16:31 评论0 收藏0