精华内容
下载资源
问答
  • vue下拉框二级联动
    千次阅读
    2020-12-31 09:07:07

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

    第一种:

    这是第一种方法的html部分代码:

    {{yx.text}}

    {{zy.text}}

    这是第一种方法的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部分代码:

    {{yx.text}}

    {{zy.text}}

    这是第二种方法的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;

    }

    }

    }

    }

    });

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

    更多相关内容
  • vue下拉框二级联动

    千次阅读 2021-03-22 00:36:49
    <... <head> <meta charset="utf-8">...script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> .
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Vue 测试实例</title>
    		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<ol>
    				<li v-for="site in sites">
    					{{ site.name }}
    				</li>
    			</ol>
    			<div>
    				  <span>所在区域</span>
    				  <select name="" v-model="countryName" @change="change_select">
    					<option v-for="(item,index) in area" v-bind:value="item.country">{{item.country}}</option>
    				  </select>
    				  <select name="" v-model="cityName">
    					<option v-for="(item,index) in cityNames" v-bind:value="item">{{item}}</option>
    				  </select>
    			</div>
    		</div>
    
    		<script>
    			new Vue({
    				el: '#app',
    				data: {
    					sites: [{
    							name: 'Runoob'
    						},
    						{
    							name: 'Google'
    						},
    						{
    							name: 'Taobao'
    						}],
    					countryName:"",
    					cityName:"",
    					cityNames:[],
    					area:[
    					  {
    						"country":"美国",
    						"city":["纽约","洛杉矶","旧金山","西雅图","波士顿","休斯顿","圣地亚哥","芝加哥","其它"],
    						},
    					  {
    						"country":"加拿大",
    						"city":["温哥华","多伦多","蒙特利尔","其它"]
    					  },
    					  {
    						"country":"澳大利亚",
    						"city":["悉尼","墨尔本","其它"]
    					  },
    					  {
    						"country":"新加坡",
    						"city":["新加坡"]
    					},
    					]
    				},
    				methods:{
    					change_select(){
    						console.log("---------")
    						var that = this
    						that.cityName = ''
    						for(var k in that.area){
    							console.log(k)
    							console.log(that.area[k].country)
    							console.log(that.countryName)
    							if(this.countryName == that.area[k].country){
    								that.cityNames = that.area[k].city
    								console.log(that.cityNames)
    							}
    						}
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    

    <select>标签中v-model绑定的值要与标签<option>选中的值相等,则必须给<option>设置属性  v-bind:value="item.country" (给option选项设置一个值)否则无法select选中的值要么为空,要么是整个area列表中的值或者其中的某个json对象。area可以看成原始数据。

    countryName:"",
    cityName:"",
    cityNames:[],

    只是变量用来存储数据的。cityNames:[],是动态的获取城市列表的中间变量而已。

    思路:

    1、先遍历area;

    2、判断当前遍历的area中的country是否与select标签选中的值countryName相等;

    3、如果相等,则将当前国家中的city(城市)列表赋值给cityNames;

    4、城市下拉框中option会遍历cityNames列表,vue动态的生成下拉框选项。

    展开全文
  • 基于vue下拉框n级联动

    千次阅读 2022-04-26 13:51:28
    基于vue实现下拉框的n级联动

    项目中不少同仁需要下拉框的n级联动,目前为止查到的资料个人都觉得不太满意,于是自己写了个能够n级联动的下拉框,希望能帮助大家,先上效果图

    在这里插入图片描述

    在这里插入图片描述

    以下是代码,可以复制直接使用,数据是自己编的,主要提供个思路给大家作为参考

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
       <h1>选中的详情:{{detailMsg}}</h1>
       <div v-for="num in chooseArray.length" :key="num">
         <h1>{{num}}级分类</h1>
         <el-select v-model="objArr[num-1]" placeholder="请选择"  >
           <!-- 单纯为el-option绑定单击事件是不生效的,需要为其添加.native 修饰符 -->
          <el-option
          v-for="item in chooseArray[num-1]"
            @click.native="chooseChildrenArr(item)"
            :key="item.id"
            :value="item.name">
            {{item.name}}
          </el-option>
        </el-select>
       </div>
      </div>
      <!-- 引入vue.js文件 -->
      <script src="./vue.js"></script>
      <!-- 引入样式element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element-ui组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
       <script>
         const app = new Vue({
           el:"#app",
           data() {
             return {
              //所有下拉框数据
              array: [
                {
                  "name": "A",
                  "level": 1,
                  "parent_id": null,
                  "id": 1,
                  "children": [
                    {
                      "name": "A-A",
                      "level": 2,
                      "parent_id": 1,
                      "id": 4,
                      "children": [
                        {
                          "name": "A-A-A",
                          "level": 3,
                          "parent_id": 4,
                          "id": 10,
                          "children": []
                        },
                        {
                          "name": "A-A-B",
                          "level": 3,
                          "parent_id": 4,
                          "id": 11,
                          "children": []
                        },
                      ]
                    },
                    {
                      "name": "A-B",
                      "level": 2,
                      "parent_id": 1,
                      "id": 5,
                      "children": []
                    },
                  ]
                },
                {
                  "name": "B",
                  "level": 1,
                  "parent_id": null,
                  "id": 3,
                  "children": [
                    {
                      "name": "B-A",
                      "level": 2,
                      "parent_id": 3,
                      "id": 8,
                      "children": []
                    },
                    {
                      "name": "B-B",
                      "level": 2,
                      "parent_id": 3,
                      "id": 9,
                      "children": []
                    }
                  ],
                },
                {
                  "name": "C",
                  "level": 1,
                  "parent_id": null,
                  "id": 99,
                  "children": []
                }
              ],
              //选中的下拉框数据
              chooseArray: [],
               // el-select选中的数据
               objArr:[],
              //  选中的数据详情
              detailMsg:''
             }
           
           },
           methods: {
            chooseChildrenArr(val){
              // 每次重新点击下拉框都要清楚,后续下拉框的值,重新为其赋值
              if(val.children.length>0){  //如果选中的元素,其有子元素,那么保留下一级的下拉框
                // this.obj = {}
                this.chooseArray[val.level] = val.children
                this.chooseArray.splice(val.level+1)
                this.objArr.splice(val.level)
              }else {  //如果选中的元素,没有子元素,那么只保留切换的下拉框,清楚其以下的所有下拉框
                this.chooseArray.splice(val.level);
                this.objArr.splice(val.level)
              }
              // 每次重新选择,都将上一次detailMsh清空,防止下一次的选择干扰它
              this.detailMsg = ''
              for(let key in this.objArr){
                this.detailMsg +=(key*1+1)+'级分类:' +this.objArr[key] +' '
              }
            },
           },
           created() {
             var arr= []
             this.array.forEach(ele=>{
               if(ele.level == 1)arr.push(ele)
             })
            /* 
            初始化页面,将数据中一级分类保留放入到要便利的数组中
            其核心思路是
            [[一级下拉框数据],[二级下拉框数据],[三级下拉框]....[n级下拉框]  ]
            */ 
             this.chooseArray[this.chooseArray.length] = arr
           },
         })
       </script>
    </body>
    </html>
    

    有任何疑问都欢迎指出,看到的都会及时回复

    展开全文
  • vue实现下拉框二级联动效果

    千次阅读 2021-11-01 22:49:33
    vue实现下拉菜单二级联动效果1、实现效果2、后端返回的数据格式3、vue页面中 1、实现效果 2、后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": ...

    1、实现效果

    在这里插入图片描述

    2、后端返回的数据格式

    "list": [
          {
            "id": "1178214681118568449",
            "title": "后端开发",
            "children": [
              {
                "id": "1178214681139539969",
                "title": "Java"
              },
              {
                "id": "1178585108407984130",
                "title": "Python"
              },
              {
                "id": "1454645056483913730",
                "title": "C++"
              },
              {
                "id": "1454645056731377666",
                "title": "C#"
              }
            ]
          },
          {
            "id": "1178214681181483010",
            "title": "前端开发",
            "children": [
              {
                "id": "1178214681210843137",
                "title": "JavaScript"
              },
              {
                "id": "1178585108454121473",
                "title": "HTML/CSS"
              }
            ]
          },
          {
            "id": "1178214681231814658",
            "title": "云计算",
            "children": [
              {
                "id": "1178214681252786178",
                "title": "Docker"
              },
              {
                "id": "1178214681294729217",
                "title": "Linux"
              }
            ]
          },
          {
            "id": "1178214681324089345",
            "title": "系统/运维",
            "children": [
              {
                "id": "1178214681353449473",
                "title": "Linux"
              },
              {
                "id": "1178214681382809602",
                "title": "Windows"
              }
            ]
          },
          {
            "id": "1178214681399586817",
            "title": "数据库",
            "children": [
              {
                "id": "1178214681428946945",
                "title": "MySQL"
              },
              {
                "id": "1178214681454112770",
                "title": "MongoDB"
              }
            ]
          },
          {
            "id": "1178214681483472898",
            "title": "大数据",
            "children": [
              {
                "id": "1178214681504444418",
                "title": "Hadoop"
              },
              {
                "id": "1178214681529610242",
                "title": "Spark"
              }
            ]
          },
          {
            "id": "1178214681554776066",
            "title": "人工智能",
            "children": [
              {
                "id": "1178214681584136193",
                "title": "Python"
              }
            ]
          },
          {
            "id": "1178214681613496321",
            "title": "编程语言",
            "children": [
              {
                "id": "1178214681626079234",
                "title": "Java"
              }
            ]
          }
        ]
    

    数据格式不一定和上面的一样,我上一篇文章是把这个数据格式用在了树形控件上面,这里放在二级联动上面。

    3、vue页面中

     <!-- 所属分类 TODO -->
          <el-form-item label="课程分类">
            <!--一级分类-->
            <el-select
              v-model="courseInfo.subjectParentId"
              placeholder="一级分类" @change="subjectLevelOneChanged">
              <el-option
                v-for="subject in subjectOneList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>
    
            <!-- 二级分类 -->
            <el-select v-model="courseInfo.subjectId" placeholder="请选择">
              <el-option
                v-for="subject in subjectTwoList"
                :key="subject.value"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>
          </el-form-item>
    
    import course from '@/api/edu/course'
    import subject from '@/api/edu/subject'
    export default {
      data() {
        return {
          saveBtnDisabled: false, // 保存按钮是否禁用
          courseInfo:{
            title: '',
            subjectId: '',      //二级分类id
            subjectParentId:'', //一级分类id
            teacherId: '',      //讲师id
            lessonNum: 0,       //课时
            description: '',    //课程简介
            cover: '/static/01.jpg',          //默认封面图片
            price: 0
          },
          teacherList:[],  //封装所有的讲师数据
          subjectOneList:[],  //一级分类
          subjectTwoList:[] ,  //二级分类
          BASE_API: process.env.BASE_API // 接口API地址
        }
      },
      created() { //页面渲染之前执行
        //初始化所有讲师
        this.getListTeacher()
        //初始化一级分类
        this.getOneSubject()
      },
      methods: {
        //点击某个一级分类,会触发change事件,显示对应的二级分类
        subjectLevelOneChanged(value){
            //value就是一级分类的id值
            //先遍历所有的分类 里面包含一级和二级
          for (var i = 0; i <this.subjectOneList.length; i++) {
            //每个一级分类
            var oneSubject=this.subjectOneList[i]
            //判断:所有一级分类id和点击一级分类id是否一样
            if(value===oneSubject.id){  //===即比较值 还要比较类型
              //从一级分类中获取所有的二级分类
              this.subjectTwoList=oneSubject.children
              //把二级分类Id值清空
              this.courseInfo.subjectId=''
            }
          }
        },
        //查询所有的一级分类
        getOneSubject(){
          subject.getSubjectList()
          .then(response=>{
            this.subjectOneList=response.data.list
          })
        }
      }
    }
    </script>
    

    主要思想就是在第一级下拉框发生单击事件的时候,我们拿到第一级下拉框的id值(这里你不一定是id值),然后遍历包含所有数据的一级分类集合,找到和当前单击事件选中的一级分类id值相等的那个对象,然后把它的children属性(我的children在后端是个二级分类的集合)赋值给data属性里面的二级分类数组对象subjectTwoList即可。
    我这里是后端一次性把所有数据都取到了,我在前端遍历解决的。当然,你也可以修改下单击事件的执行逻辑,还有一种方法是每单机一次,用单击选中的以及下拉框的键去后端查所有的二级分类,再将查到的二级分类赋值给第二个下拉框即可,但这样效率感觉有点慢,虽然这也是一种实现方式。

    在这里插入图片描述

    展开全文
  • 下面小编就为大家分享一篇VUE2 前端实现 静态二级省市联动选择select的示例。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue下拉框二级联动,加一个input框赋值经行登录操作 首先进入一览是一个下拉框里面包含很多的项目, 点击一个下拉框 会出现对应的 他包含的多个用户, 然后选择其中一个用户以后 input会出现对应的密码, 我在点击登录...
  • 在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
  • Vue+ElementUI实现下拉框二级联动

    千次阅读 2020-12-03 15:06:39
    项目业务需求:设计两个搜索下拉框,其中二级下拉框的数据随着一级下拉框选中的数据而变化。 理解业务需求:通常来说我们树型下拉框的数据库设计是在同一个表,且子节点会储存对应的多个祖节点(父节点+父节点的父...
  • vue+element下拉框实现二级联动

    万次阅读 多人点赞 2019-07-09 17:34:49
    //改变value值,实现 联动, 给下拉框绑定change事件 selectExitSelectConfig(val) { this.localFavorites = []; this.goodsCircle.numIids = null, this.getLocalSelectConfig(); }, ...
  • 下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下拉框二级联动

    2022-05-06 21:48:15
    进度状态的下拉框数据是根据流程节点所选中的数据来展示 这里由于后端不好处理,前端把两个下拉框的数据手动输入进去 <el-form-item label="流程节点"> <el-select v-model="searchForm....
  • VUE下拉框双向联动

    千次阅读 2022-04-01 19:59:30
    VUE实现多个下拉框双向联动效果
  • vue 设置下拉框级联动

    千次阅读 2018-10-19 16:16:54
    如图中,用vue实现三个选择框是联动关系,首先选择厂商,然后品牌下拉框中出现的品牌是所选厂商包含的品牌,同理,选择完品牌后,车型也是所选品牌中包含的车型。 例如有这样的对应关系: 厂商 品牌 车型 ...
  • vue下拉el-select二级联动

    千次阅读 2022-04-24 22:25:15
    vue下拉el-select二级联动 <el-select v-model="departmentid" placeholder="请选择部门" @change="changeset" > <el-option v-for="item in departmentlist" :key="item.value" :label="item....
  • 后端通过springboot读取数据,前端通过filter函数实现一级、二级单位过滤分组,进而实现菜单联动
  • vue + elementUI 实现下拉框二级联动

    千次阅读 多人点赞 2020-10-30 22:23:27
    代码 <template> <div class="app"> <el-form ref="form" :model="form"> ...el-form-item label="手机品牌">...el-select v-model="form.phoneBrand" placeholder="请选择" @change="changeSelect...
  • 问题描述VUE级联动下拉框,做数据修改时,第下拉框不显示值1.第下拉框的List是由第一个下拉框的值决定的,即选了第一个下拉框的值,加载第下拉框的List类似于选了省份,再选城市2.做数据修改时,用...
  • 实现一个二级下拉框,第二个下拉框随第一个下拉框的值改变,而动态改变。并实现,一个加载按钮,点击后切换到,其他数据源。 下面附上代码: <template> <div class="screen-container"> <header ...
  • select下拉菜单实现二级联动效果

    千次阅读 2021-01-13 17:18:51
    需求:建立年级、班级两个数据表,获取年级表信息,根据年级,获取相应的班级 效果图: 不完美的地方就是... 总结 以上所述是小编给大家介绍的select下拉菜单实现二级联动效果,希望对大家有所帮助! 时间: 2019-10-26
  • (一)预计效果预览展示  ...()如何实现?      1.需要写入两个下拉框写入代码里面,并将我们要渲染的数据与下拉框进行一个绑定。      
  • element-ui实现下拉框二级联动

    千次阅读 2021-05-09 08:51:55
    静态页面是基于element开发的 市 export default { data () { return { provAndCity: { province: this.value.province, city: this.value.city }, provinceList: [], //第一级下拉框 cityList: [] //第二级下拉框 }...
  • Vue之三级联动

    千次阅读 2022-05-23 16:48:51
    vue的三级联动本质上和js的联动是一样的,只不过需要注意一下细节问题 <div id="app"> <selects></selects> </div> <template id="sel"> <div> <select v-model="text...
  • 前端bootstrap 下拉框二级联动

    千次阅读 2020-03-26 16:51:32
    使用bootstrap的selectpicker时,二级联动一直不展示其他选项。 <div class="col-sm-1"> <select id="province_code" data-style="btn-success btn-outline" class="selectpicker" onchange="getCity()"&...
  • Vue实现三级联动/多级联动/城市选择

    千次阅读 2020-12-31 09:07:07
    根据第下拉框的选择来进行遍历,然后得到的数组保存给countyArr 最后直接上完整代码 HTML部分 {{item.name}} {{item.name}} {{item.name}} JS部分 let vm = new Vue({ el: '#app', data: { province: '', city: ...
  • vue+elementui 下拉框二级联动

    千次阅读 2019-12-11 17:44:49
    vue script: data(){ return{ }, methods:{ }
  • 在项目中有时需要做三级联动,但采用框架不足以实现项目需求,采用下拉选择框实现三级联动甚至多级联动

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 391
精华内容 156
关键字:

vue下拉框二级联动