精华内容
下载资源
问答
  • Vue二级联动

    2019-11-21 11:13:01
    Vue二级级联 1.省市县三级联动 (1)省市县三级联动原码如下: <template> <yd-layout title="CitySelect"> <yd-cell-group title="默认调用" class="demo-small-pitch"> <yd-cell-...

    Vue二级联动

    1.省市县三级联动
    (1)省市县三级联动原码如下:

    <template>
        <yd-layout title="CitySelect">
    
            <yd-cell-group title="默认调用" class="demo-small-pitch">
                <yd-cell-item arrow>
                    <span slot="left">所在地区:</span>
                    <input slot="right" type="text" @click.stop="show1 = true" v-model="model1" readonly placeholder="请选择收货地址">
                </yd-cell-item>
            </yd-cell-group>
    
            <yd-cell-group title="设置默认值">
                <yd-cell-item arrow>
                    <span slot="left">所在地区:</span>
                    <input slot="right" type="text" @click.stop="show2 = true" v-model="model2" readonly placeholder="请选择收货地址">
                </yd-cell-item>
            </yd-cell-group>
    
            <yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
    
            <yd-cityselect v-model="show2" :callback="result2" :items="district" provance="新疆" city="乌鲁木齐市" area="天山区"></yd-cityselect>
    
        </yd-layout>
    </template>
    
    <script type="text/babel">
        import District from 'ydui-district/dist/jd_province_city_area_id';
        export default {
            data() {
                return {
                    show1: false,
                    show2: false,
                    model1: '',
                    model2: '新疆 乌鲁木齐市 天山区',
                    district: District
                }
            },
            methods: {
                result1(ret) {
                    console.log(ret);
                    this.model1 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
                },
                result2(ret) {
                    console.log(ret);
                    this.model2 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
                }
            }
        }
    </script>
    

    注意:其中数据来源为(ydui-district),需要程序运行时,在终端输入:“npm install ydui-district”

    (2)省市县三级联动效果图如下:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    2.将三级联动改为二级联动
    (1)根据实际需要定义一个新的数据源,不再用之前下载的(ydui-district)数据源,具体定义数据源部分代码如下:

     district: [
                     {
                      "v": "1",
                      "n": "油封",
                      "c": [
                            {
                          "v": "20",
                          "n": "油封一班",
                            },
                            {
                             "v": "21",
                             "n": "油封二班",
                            },
                            ]
                     },
                      {
                       "v": "2",
                       "n": "总装",
                       "c": [
                             {
                               "v": "2817",
                               "n": "总装一班",
                             },
                             {
                               "v": "2820",
                               "n": "总装二班",
                             },
                          ]
    	              },
    	             {
                      "v": "3",
                      "n": "6DM缸盖",
                      "c": [
                            {
                          "v": "20",
                          "n": "6DM缸盖一班",
                            },
                            {
                             "v": "21",
                             "n": "6DM缸盖二班",
    						},
    						 {
                             "v": "21",
                             "n": "6DM缸盖三班",
    						},
    						 {
                             "v": "21",
                             "n": "6DM缸盖四班",
                            },
                            ]
    				 },
    				 {
                      "v": "4",
                      "n": "6DM缸体",
                      "c": [
                            {
                          "v": "20",
                          "n": "6DM缸体一班",
                            },
                            {
                             "v": "21",
                             "n": "6DM缸体二班",
    						},
    						 {
                             "v": "21",
                             "n": "6DM缸体三班",
    						},
    						 {
                             "v": "21",
                             "n": "6DM缸体四班",
                            },
                            ]
    				 },
    				  {
                      "v": "5",
                      "n": "校车",
                      "c": [
                            {
                          "v": "20",
                          "n": "校车一班",
                            },
                            {
                             "v": "21",
                             "n": "校车二班",
                            },
                            ]
    				 },          
    ],
    

    键值说明:v => value, n => name, c => children(子级)。

    (2)Html部分代码:

      <yd-layout>
            <yd-cell-group>
                <yd-cell-item arrow>
                    <span slot="left">工段及班级:</span>
                    <input slot="right" type="text" @click.stop="show2 = true" v-model="model1" readonly placeholder="请选择">
                </yd-cell-item>
            </yd-cell-group>
          <yd-cityselect v-model="show2" :callback="result1" :items="district"></yd-cityselect>
        </yd-layout>
    
    

    (3)JavaScript部分代码:

    data() {
    			return {
    				show1: false,
    				show2: false,
                    model1: '',
                    //district: District,
    				}
     methods: {
                result1(ret) {
                    console.log(ret);
                    this.model1 = ret.itemName1 + ' ' + ret.itemName2 ;
                },
    

    注意:若为三级联动,则为( this.model1 = ret.itemName1 + ’ ’ + ret.itemName2 + ’ ’ + ret.itemName3),四级,五级等等以此类推。

    (4)界面效果:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue二级联动

    2021-08-29 22:54:16
    <template> <div class="linkage"> <div class="linkage-button" ref="linkage-button"> <div class="linkage-button-list" ref="linkage-button-list">... index == ButtonListIndex
    <template>
      <div class="linkage">
        <div class="linkage-button" ref="linkage-button">
          <div class="linkage-button-list" ref="linkage-button-list">
            <div
              :class="
                index == ButtonListIndex
                  ? 'linkage-button-item ac'
                  : 'linkage-button-item'
              "
              v-for="(item, index) in ButtonList"
              :key="item.id"
              @click="FnButtonTab(index)"
            >
              {{ item.text }}
            </div>
          </div>
        </div>
        <div class="linkage-content" ref="linkage-content" @scroll="FnScroll">
          <div class="linkage-content-list">
            <div
              class="linkage-content-item"
              v-for="item in ContentList"
              :key="item.id"
              :style="{ height: `${item.height}px` }"
            >
              <div class="linkage-content-title">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "linkage",
      data() {
        return {
          ButtonList: [],
          ContentList: [],
          ButtonListIndex: 0,
          ScrollBys: true,
        };
      },
      methods: {
        //   左侧按钮的渲染
        FnSetButton(n) {
          for (var i = 0; i < n; i++) {
            this.ButtonList.push({
              id: `按钮${i}`,
              text: `按钮${i}`,
            });
          }
        },
        // 右侧内容的渲染
        FnSetContent(n) {
          let ContTop = 0; //第一个元素距离页面顶部的距离
          let Random = this.FnSetRandom(750, 1400);
          for (let i = 0; i < n; i++) {
            this.ContentList.push({
              height: Random,
              id: `内容${i}`,
              text: `内容${i}`,
              top: ContTop,
            });
            ContTop += Random;
          }
        },
        // 随机数
        FnSetRandom(m, n) {
          return parseInt(Math.random() * (m - n) + n);
        },
        // 点击切换左边
        FnButtonTab(index) {
          this.ScrollBys = false;
          this.ButtonListIndex = index;
          this.$refs["linkage-content"].scrollTop = this.ContentList[index].top;
        },
        // 右边滚动切换左边
        FnScroll(ev) {
          this.ContTop = ev.target.scrollTop;
          if (this.ScrollBys) {
            let n = 0;
            for (let i = 0; i < this.ContentList.length; i++) {
              if (
                this.$refs["linkage-content"].scrollTop >= this.ContentList[i].top
              ) {
                //盒子滚动的距离如果大于右边盒子里的元素距离页面顶部的距离
                n = i;
              }
            }
            this.ButtonListIndex = n;
          }
          if (this.ContTop == this.ContentList[this.ButtonListIndex].top) {
            this.ScrollBys = true;
          }
        },
      },
      mounted() {
        this.ButtonHeight =
          this.$refs["linkage-button-list"].children[0].offsetHeight;
        this.centerIndex = Math.floor(
         ( this.$refs["linkage-button"].offsetHeight / this.ButtonHeight )/2
        );
        // console.log(this.centerIndex)
      },
      created() {
        this.FnSetButton(20);
        this.FnSetContent(20);
      },
      watch: {
        ButtonListIndex(index) {
           
          if (index > this.centerIndex) {
            this.$refs["linkage-button"].scrollTop =
              (index - this.centerIndex) * this.ButtonHeight;
          }
          if (index < this.centerIndex) {
            this.$refs["linkage-button"].scrollTop = 0;
          }
        },
      },
    };
    </script>
    <style lang="less" scoped>
    body {
      margin: 0;
    }
    .linkage {
      width: 100vw;
      height: 100vh;
      display: flex;
      .linkage-button {
        width: 20vw;
        height: 100vh;
        background: chocolate;
        text-align: center;
        font-size: 40px;
        color: #fff;
        overflow: scroll;
        scroll-behavior: smooth;
        .linkage-button-list {
          width: 20vw;
          .linkage-button-item.ac {
            background: lightblue;
          }
          .linkage-button-item {
            width: 20vw;
            height: 10vh;
            line-height: 10vh;
          }
        }
      }
      .linkage-content {
        width: 80vw;
        height: 100vh;
        scroll-behavior: smooth;
        overflow: scroll;
        .linkage-content-list {
          .linkage-content-item {
            width: 80vw;
            height: 100vh;
            .linkage-content-title {
              height: 6vh;
              line-height: 6vh;
              width: 80vw;
              text-align: center;
              background: chartreuse;
              color: #fff;
              font-size: 30px;
            }
          }
        }
      }
    }
    .linkage-button::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .linkage-content::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    </style>
    
    展开全文
  • Vue二级联动(滚动型)

    2019-11-22 13:39:56
    Vue二级联动(2) 本文主要介绍vue二级联动的另一种形式。 1.vue-multilevel-picker Vue 组件库 三级联动 *原文网址链接:(https://www.jianshu.com/p/9aa54a2a2540) *Github地址:...

    Vue二级联动(2)

      本文主要介绍vue二级联动的另一种形式。
    

    1.vue-multilevel-picker Vue 组件库 三级联动

    *原文网址链接:(https://www.jianshu.com/p/9aa54a2a2540)
    *Github地址:(https://github.com/darkdragonblade/vue-multilevel-picker)
    (1)在Github中下载程序压缩包
    (2)install
    npm install multilevel-picker
    import multilevel from ‘multilevel-picker’; (在main.js里添加 )
    Vue.use(multilevel) (在main.js里添加 )

    2.三级联动程序运行

    (1)三级联动原代码

    <template>
      <div class="home">
        <multilevel @done="done" @change="change" :data="data" :column="'3'"></multilevel>
      </div>
    </template>
    
    <script>
    import cityData from '../../../../city-data.json';
    import multilevel from 'multilevel-picker';
    export default {
      name: 'home',
      data () {
        return {
         data:''
        }   
      },
      mounted() {
        this.data = cityData
      },
      methods: {
        change(data){
        },
        done(data){ 
        }
      },
    }
    
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    #div1{
      animation:mymove 2s infinite 
    }
    @keyframes mymove
    {
    from {margin-top:0px;}
    to {margin-top:200px;}
    }
    </style>
    
    

    (注:数据来源为city-data.json)

    (2)三级联动效果图
    在这里插入图片描述

    3.二级联动

    (1)Html部分代码:

    <div class="main-content" v-cloak>
    			<div class="home">
               <multilevel @done="done" @change="change" :data="data" :column="'2'"></multilevel>
    		  
    			<yd-button style="margin: 0rem;" bgcolor="#2F6CDD" color="#FFF" size="large" @click.native="show1 = true">筛选</yd-button>
    			<div class="mescroll">
    				<div style="margin-bottom: 0.1rem;">
    					<div v-for="(item,index) in btn" v-if="item!=''" style="width: 50%;padding:0rem 0.125rem;display: inline-block;">
    						<yd-button size="large" type="warning" @click.native="getdatalist2(index+1)">{{item}}</yd-button>
    					</div>
    				</div>
    				<div style="margin-top: 0.3rem;padding: 0.3125rem 0rem;background-color: white;">
    					<div id="myChart1" :style="{width: '100%', height: '350px'}"></div>
    				</div>
    				 </div>
    			</div>
    

    (2)新建一个data.json

    [
    	{
    		"name": "油封",
    		"code": "130000",
    		"children": [
    			{
    				"name": "油封一班",
    				"code": "130100"
    			},
    			{
    				"name": "油封二班",
    				"code": "130200"
    			}
    		]
    	},
    	{
    		"name": "总装",
    		"code": "130000",
    		"children": [
    			{
    				"name": "总装一班",
    				"code": "130100"
    			},
    			{
    				"name": "总装二班",
    				"code": "130200"
    			}
    		]
    	},
    	{
    		"name": "6DM缸盖",
    		"code": "130000",
    		"children": [
    			{
    				"name": "6DM缸盖一班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸盖二班",
    				"code": "130200"
    			},
    			{
    				"name": "6DM缸盖三班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸盖四班",
    				"code": "130100"
    			}
    		]
    	},
    	{
    		"name": "6DM缸体",
    		"code": "130000",
    		"children": [
    			{
    				"name": "6DM缸体一班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸体二班",
    				"code": "130200"
    			},
    			{
    				"name": "6DM缸体三班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸体四班",
    				"code": "130100"
    			}
    		]
    	},
    	{
    		"name": "校车",
    		"code": "130000",
    		"children": [
    			{
    				"name": "校车一班",
    				"code": "130100"
    			},
    			{
    				"name": "校车二班",
    				"code": "130200"
    			}
    		]
    	}
    
    
    ]
    

    (3)页面效果

    展开全文
  • vue二级联动select

    2017-12-20 15:16:00
    < ...实现原理:通过vue v-model 绑定获取到area当前的对象,让后city遍历的时候世界遍历当前获取到的国际的对象下的city就好,当需要向后台传值的,要传的是vue实例下 this.countryName.country
    <div>
              <span>所在区域</span>
              <select name="" v-model="country">
                <option :value="item" v-for="(item,index) in area">{{item.country}}</option>
              </select>
              <select name="" v-model="cityName">
                <option :value="item" v-for="(item,index) in country.city">{{item}}</option>
              </select>
    </div>

    vue data:

    export default{
        data(){
          return {
            countryName:"",
            cityName:"",    
            area:[
              {
                "country":"美国",
                "city":[
                  "纽约",
                  "洛杉矶",
                  "旧金山",
                  "西雅图",
                  "波士顿",
                  "休斯顿",
                  "圣地亚哥",
                  "芝加哥",
                  "其它",
                ]
              },
              {
                "country":"加拿大",
                "city":[
                  "温哥华",
                  "多伦多",
                  "蒙特利尔",
                  "其它"
                ]
              },
              {
                "country":"澳大利亚",
                "city":[
                  "悉尼",
                  "墨尔本",
                  "其它"
                ]
              },
              {
                "country":"新加坡",
                "city":[
                  "新加坡"
                ]
              },
              /*{
               "country":"中国",
               "city":[
                  "北京市",
               ]
               },*/
            ],
          }
        },

     

    实现原理:通过vue v-model 绑定获取到area当前的对象,让后city遍历的时候世界遍历当前获取到的国际的对象下的city就好,当需要向后台传值的,要传的是vue实例下 this.countryName.country

    展开全文
  • vue项目实现二级自定义二级联动 如下图在选择二级联动的时候 html部分代码 <select v-model="selected"> <option v-for="yx in YX" :value="yx.text"> {{yx.text}} </option> </select>...
  • vue实现二级联动.html

    2021-03-25 15:21:34
    vue实现二级联动.html
  • 下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue实现二级联动

    千次阅读 2020-07-16 14:13:23
    Vue实现二级联动: [思路] 1.先定义两个变量集合:一个用于装一级列表,另一个用于装二级列表 写两个select 第一个select绑定触发事件,但触发事件是触发查询二级列表的:在触发时,同时将一级列表的码值传到二级,...
  • vue级联动 地址联动 vue级联选择

    千次阅读 2020-04-08 11:34:54
    vue级联动效果 实现前提 首先看下,我们的开发环境及数据封装特点: 第一: 开发框架vue-cli3 elementUI 第: 数据封装情况,详见代码部分 data中的 data; 满足以上2点再继续,如果数据封装有所不同,可根据...
  • 一款简单的基于vue实现的三级联动下拉框代码,适用于各种三级联动下拉菜单选择功能。
  • vue实现二级联动选择器

    千次阅读 2018-03-29 17:14:41
    使用vue实现二级联动的下拉列表选择器,代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;demo&lt...
  • 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"> .
  • vue 实现二级联动

    千次阅读 2018-09-10 17:54:03
    因项目需要,最近用vue写了个二级联动,刚开始用vue不熟悉,收集了两种方法,这也是我借鉴别人的文章和思路才写出来的,其实没什么区别,可以参考下:第一种:这是第一种方法的html部分代码: <div id="test">...
  • vue省市二级联动

    2021-04-14 21:37:45
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...二级
  • 在实现省市二级联动时,如果省份和城市写在一个数组对象中。可以根据,点击某个省份时获取到目标省份的id 是否同 数组中的某个对象id一致 来判断iView中的on-change事件on-change事件:即选中的Option变化时触发,...
  • 城市数据见 城市数据样式是基于bootstrap 直接上代码html部分地区:请选择{{p.area_name}}请选择{{c.area_name}}var app = new Vue({el:"#vue_container",data:{current_page:$_GET.page?parseInt($_GET.page):1, /* ...
  • vue select 二级联动

    2020-12-10 00:21:45
    <template> <div> <el-select v-model="province" placeholder="请选择" @change="selectChange"> <el-option v-for="(item, index) in compony" :key="index" :label="item.name" :value=...
  • 本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下:代码如下:头像 姓名性别出生日期ref="datePicker"type="date":startDate="startDate":endDate="endDate"v-model="dateValue"@...
  • 省市区联动 &lt;Cascader trigger="hover" placeholder="请选择您的城市" style="width:238px;display:inline-block;" :data="provs" v-model="formValidate....
  • vue实现二级联动效果

    千次阅读 2019-04-27 18:23:00
    你如城市与省份间的二级联动效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> .pag-set-bg{...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,647
精华内容 658
关键字:

vue二级联动

vue 订阅