vue 实现二级联动

lufficc 发布于2019-08-23 11:53 / 3431人阅读

摘要：因项目需要，最近用写了个二级联动，刚开始用不熟悉，收集了两种方法，这也是我借鉴别人的文章和思路才写出来的，其实没什么区别，可以参考下第一种这是第一种方法的部分代码这是第一种方法的部分代码计信院计信院软件工程计算机科学与技术信息安全商学

因项目需要，最近用vue写了个二级联动，刚开始用vue不熟悉，收集了两种方法，这也是我借鉴别人的文章和思路才写出来的，其实没什么区别，可以参考下：
第一种：
这是第一种方法的html部分代码：

这是第一种方法的js部分代码：

new Vue({
  el: "#test",
  data: {
    selected: "计信院",
    YX: [{
      text: "计信院",
      ZY: [{
        text: "软件工程"
      }, {
        text: "计算机科学与技术"
      }, {
        text: "信息安全"
      }, ]
    }, {
      text: "商学院",
      ZY: [{
        text: "旅游管理"
      }, {
        text: "工商管理"
      }, {
        text: "行政管理"
      }, ]
    }, ]
  },
  computed: {
    selection: {
      get: function() {
        var that = this;
        return this.YX.filter(function(item) {
          return item.text == that.selected;
        })[0].ZY;
      }
    }
  }
});

以上是一种方法，总体来说还不错，而且默认有第一项，无需在写默认项。
下面是另一种方法，这个方法和上面不同的是没有默认项，但是比上面哪种方法更好理解，这个方法怎么加默认项，现在还没搞明白，后续会继续更新：
这是第二种方法的html部分代码：

这是第二种方法的js部分代码：

var vm = new Vue({
    el:"#test",
    data:{
        YX:[
            {
                text:"计信院",
                ZY:[
                    {text:"软件工程"},
                    {text:"计算机科学与技术"},
                    {text:"信息安全"},
                ]
            },
            { 
                text:"商学院",
                ZY:[
                    {text:"旅游管理"},
                    {text:"工商管理"},
                    {text:"行政管理"},
                ]
            },       
        ]
    },
    computed:{
        selection: function() {
            for (var i = 0; i < this.YX.length; i++) {
                if (this.YX[i].text === this.A) {
                    return this.YX[i].ZY;
                }
            }
        }
    }
});

总体来说，两种方法都可以，都值得借鉴一下

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

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

vue项目中使用element-ui下拉框选项值为对象时报错

摘要：在做后台管理时，使用了搭配，请求方法使用了插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。在做后台管理时，使用了vue搭配elementUI，请求方法使用了axios插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。对select下拉框的文档没有读的很仔细，百度过几篇文章，也没有理解他们表达的意思，然后自己又去看文档，把他的属性看...

Drummor 2019-08-26 10:57 评论0 收藏0
thinkphp+jquery+ajax二级联动使用心得

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

Invoker 2019-06-27 16:31 评论0 收藏0
jq+php+mysql 实现二级菜单联动

摘要：二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。实现原理根据大类的值，通过把值传给后台处理，通过查询数据库，得到相应的小类，并返回数据给前端处理。二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。实现的效果就是当选择大类时，小类下拉框里的选项内容也随着改变。实现原理：根据大类的值，通过jQuery把值传给后台PHP处...

sf_wangchong 2019-06-27 15:49 评论0 收藏0
php jquery ajax select 二级联动

摘要：还是那是老话，好记性不如烂笔头会的东西，不经常动手做，也就忘记了，下面是一个的联动实用小例中函数中函数还是那是老话，好记性不如烂笔头会的东西，不经常动手做，也就忘记了，下面是一个jquery ajax select 的联动实用小例： ajaxTest.html jquery + ajax + php + select ...

Apollo 2019-06-27 10:38 评论0 收藏0
真香警告：即使不用饿了么订餐，也请务必收藏好该库！

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

hightopo 2019-05-23 17:30 评论0 收藏0