精华内容
下载资源
问答
  • 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+elementui 下拉框二级联动

    千次阅读 2019-12-11 17:44:49
    vue script: data(){ return{ }, methods:{ }

    vue

    script:

    data(){

    return{

    },

    methods:{

    }

     

    展开全文
  • vue 设置下拉框级联动

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

    如图中,用vue实现三个选择框是联动关系,首先选择厂商,然后品牌下拉框中出现的品牌是所选厂商包含的品牌,同理,选择完品牌后,车型也是所选品牌中包含的车型。

    例如有这样的对应关系:

    厂商品牌车型
    长城哈弗HB01
    HB02
    HB03
    WEYHB11
    HB13
    HAVELAH21
    北汽越野BJ20
    BJ40
    商务x55

    界面如图所示:

    我们想要的效果是:

    在选择了长城后,品牌选择框中只出现长城的品牌。

    本篇文章中只介绍vue的实现,不接受后台接口的实现。(如有需要可以留言)

    先介绍接口文件中需要写的调后台的代码,由于我做的系统的业务需求,所以接口写在了不同的文档。

    api/motorcycle/firm.js文件中;

    export function firmList() {
      return request({
        url: '/instructions/firm/firmList',
        method: 'get'
      })
    }

    api/motorcycle/brand.js文件中:

    export function brandList(query) {
      return request({
        url: '/instructions/brand/brandList',
        method: 'get',
        params: query
      })
    }

    api/motorcycle/model.js文件中:

    export function modelList(query) {
      return request({
        url: '/instructions/model/modelList',
        method: 'get',
        params: query
      })
    }

    写好接口后,写页面的vue文件:

    第一步:添加下拉框

    <div class="filter-container">
    	
          <el-select class="filter-item" v-model="listQuery.firmId" placeholder="请选择厂商" style="width: 200px !important;" @change="selectFirm()">
            <el-option v-for="item in firmOptions" :key="item.name" :label="item.name" :value="item.id" >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
            </el-option>
          </el-select>
    
          <el-select class="filter-item" v-model="listQuery.brandId" placeholder="请选择品牌" style="width: 200px !important;" @change="selectBrand()">
            <el-option v-for="item in brandOptions" :key="item.name" :label="item.name" :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
            </el-option>
          </el-select>
    
          <el-select class="filter-item" v-model="listQuery.modelId" placeholder="请选择车型"  style="width: 200px !important;">
            <el-option v-for="item in modelOptions" :key="item.name" :label="item.name" :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
            </el-option>
          </el-select>
    	  
          <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
          <el-button v-if="heat_add" class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
    </div>

    其中重要的是每个下拉框中的v-model属性和@change属性。v-model属性中写的是选择完后,点击搜索提交的表单数据。@change是真正实现三个下拉框联动。

    第二步:引入查询厂商、品牌、车型的接口

    import { brandList } from '@/api/motorcycle/brand';
    import { firmList } from '@/api/motorcycle/firm';
    import { modelList } from '@/api/motorcycle/model';

    这三个接口也就是我们最前面写的对应后台的接口

    第三步:初始化选择框

    form: {},
    firmOptions:[],
    brandOptions:[],
    modelOptions: []

    第四步:@change函数

    厂商下拉框的数据是需要在访问界面的时候就查询出来,并且赋予厂商下拉框的。在创建的方法中查询并赋值。

    created() {
        this.getList();
    	firmList().then(response => {
            this.firmOptions = response.data;
        })
     }

    品牌的下拉框是点击完厂商后查询赋值的,同理车型的下拉框是点击完品牌后查询赋值的。

        // 选择厂商后
        selectFirm() {
            // 加载 品牌
            brandList({firmId: this.listQuery.firmId}).then(resopnse => {
              this.brandOptions = resopnse.data;
            })
        },
        // 选择品牌后
        selectBrand(){
        // 加载车型
            modelList({brandId: this.listQuery.brandId}).then(response => {
            this.modelOptions = response.data;
          })
        },

    这样就全部完成了下拉框的联动。如果错误的地方,请指教。

    展开全文
  • 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...

    在这里插入图片描述

    代码

    <template>
      <div class="app">
        <el-form ref="form" :model="form">
          <el-form-item label="手机品牌">
            <el-select v-model="form.phoneBrand" placeholder="请选择" @change="changeSelect">
              <el-option
                v-for="(item,index) in brandOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
    
          </el-form-item>
          <el-form-item label="手机型号">
            <el-select v-model="form.phoneType" placeholder="请选择">
              <el-option
                v-for="(item,index) in typeOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          brandOptions: ['OPPO', '华为', 'VIVO'],
          brandObj: { 'OPPO': ['OPPO1', 'OPPO2', 'OPPO3'], '华为': ['华为1', '华为2', '华为3'], 'VIVO': ['VIVO1', 'VIVO2', 'VIVO3'] },
          typeOptions: [],
          form: {
            phoneBrand: '',
            phoneType: ''
          }
        }
      },
      methods: {
        changeSelect() {
          // 清空手机型号内容
          this.form.phoneType = ''
    
          // 遍历手机品牌的下拉选项数组
          for (const k in this.brandOptions) {
            // 手机品牌内容 是否等于 手机品牌的下拉选择数组中的某一项
            if (this.form.phoneBrand === this.brandOptions[k]) {
              this.typeOptions = this.brandObj[this.form.phoneBrand]
            }
          }
        }
      }
    }
    </script>
    <style>
    .app{
      margin:20px;
      width: 100%;
    }
    </style>
    
    
    
    展开全文
  • (一)预计效果预览展示  ...()如何实现?      1.需要写入两个下拉框写入代码里面,并将我们要渲染的数据与下拉框进行一个绑定。      
  • 静态页面是基于element开发的 市 export default { data () { return { provAndCity: { province: this.value.province, city: this.value.city }, provinceList: [], //第一级下拉框 cityList: [] //第二级下拉框 }...
  • vue+element下拉框实现二级联动

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

    千次阅读 2020-12-03 15:06:39
    项目业务需求:设计两个搜索下拉框,其中二级下拉框的数据随着一级下拉框选中的数据而变化。 理解业务需求:通常来说我们树型下拉框的数据库设计是在同一个表,且子节点会储存对应的多个祖节点(父节点+父节点的父...
  • 一款简单的基于vue实现的三级联动下拉框代码,适用于各种三级联动下拉菜单选择功能。
  • 本人Vue小白,代码比较粗陋简单,欢迎指导。 以下源码基于element ui下拉框,对外输出为选择省、市的城市编码,提供重置的方法。 json文件查看另一篇文章: ... ... ...
  • 首先 我的是从数据库 查询出来的班级表和部表 下面是效果图 add.html 部:<select v-on:change="change()" v-model="jjid"> <option value="0">---请选择---</option> <option v-for=...
  • 下拉框二级联动和回显

    千次阅读 2019-12-10 15:12:55
    二级联动和回显 效果如下: 二级联动 我们首先要查询出年级表的内容,在年级表的控制层中; Controller /** * 查询nj表的内容 @RequestMapping("/spr/nj") */ @RequestMapping("/all") public R all() { List...
  • 题没看清,数量那个地儿应该是输入框,我给弄成了下拉框 不熟练,一直得百度,一直得改bug,也才到这样一个效果 贴个代码记录一下: <!-- 第一个下拉框 --> <select name="radioOrCheckbox" id=...
  • 效果如图: 这里有个坑就是:二级选择的时候有值但是选择框里不显示。 原因:因为下拉框数据是v-for接口请求来的数据,因为数据层次太多,render函数没有自动更新 解决办法: 在事件里,强制刷新一下就好了。 ...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 300
精华内容 120
关键字:

vue下拉框二级联动

vue 订阅