Vue二级联动

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)界面效果:
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值