Vue实现省市区级联下拉选择框

本文实例为大家分享了Vue实现省市区级联下拉选择框的具体代码,供大家参考,具体内容如下

以(Vue下拉选择框Select组件二)为基础实现省市区级联下拉选择框组件

(业务需要,固定省份选择为贵州,没有此业务,不传disabled属性即可)

效果图如下:

①创建级联下拉选择Cascader.vue组件

<template>
  <div class="m-cascader-wrap">
    <Select
      class="mr10"
      :style="`z-index: ${zIndex};`"
      mode="region"
      :disabled="true"
      :selectData="provinceData"
      :selValue="address.province"
      :width="84"
      placeholder="请选择省"
      @getValue="getProvinceCode" />
    <Select
      class="mr10"
      :style="`z-index: ${zIndex};`"
      mode="region"
      :selectData="cityData"
      :selValue="address.city"
      :width="172"
      placeholder="请选择市"
      @getValue="getCityCode" />
    <Select
      mode="region"
      :style="`z-index: ${zIndex};`"
      :selectData="areaData"
      :selValue="address.area"
      :width="172"
      placeholder="请选择区"
      @getValue="getAreaCode" />
  </div>
</template>
<script>
import Select from '@/components/Select'
import { dictByType } from '@/api/index'
export default {
  name: 'Cascader',
  components: {
    Select
  },
  props: {
    selectedAddress: { // 省市区初始值
      type: Object,
      default: () => {
        return {}
      }
    },
    zIndex: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      provinceData: [
        {
          dictVal: '贵州省',
          dictKey: 'P29'
        }
      ],
      cityData: [],
      areaData: [],
      regionParams: {
        type: '1',
        parentDictKey: ''
      },
      address: {
        province: 'P29',
        city: this.selectedAddress.city || '',
        area: this.selectedAddress.area || ''
      },
      addressName: {
        provinceName: '贵州省',
        cityName: '',
        areaName: ''
      },
      initialCity: true
    }
  },
  created () {
    this.getCity('P29')
    console.log('address:', this.address)
  },
  methods: {
    getCity (key) { // 获取市数据
      this.regionParams.parentDictKey = key
      dictByType(this.regionParams).then(res => {
        console.log('city-res:', res)
        if (res.message.code === 0) {
          if (res.data.dataList) {
            this.cityData = res.data.dataList
            if (this.initialCity && this.address.city) {
              this.initialCity = false
              this.cityData.forEach(item => {
                if (item.dictKey === this.address.city) {
                  this.getArea(item.dictKey)
                }
              })
            }
            console.log('cityData:', this.cityData)
          }
        }
      })
    },
    getArea (key) { // 获取区数据
      this.regionParams.parentDictKey = key
      dictByType(this.regionParams).then(res => {
        console.log('area-res:', res)
        if (res.message.code === 0) {
          if (res.data.dataList) {
            this.areaData = res.data.dataList
            console.log('areaData:', this.areaData)
          }
        }
      })
    },
    getProvinceCode (name, key) {
      console.log('province:', name, key)
    },
    getCityCode (name, key) {
      console.log('city:', name, key)
      this.address.city = key
      this.addressName.cityName = name
      this.$emit('getAddress', {}, {})
      // 获取区下拉列表
      this.getArea(key)
    },
    getAreaCode (name, key) {
      console.log('area:', name, key)
      this.address.area = key
      this.addressName.areaName = name
      this.$emit('getAddress', this.address, this.addressName)
    }
  }
}
</script>
<style lang="less" scoped>
.m-cascader-wrap {
  display: inline-block;
  width: 449px;
  height: 40px;
  line-height: 40px;
}
</style>

②在要使用的页面引入:

<Cascader
  :selectedAddress="register"
  mode="region"
  :zIndex="997"
  @getAddress="getRegisterAddress" />
import Cascader from '@/components/Cascader'
components: {
    Cascader
},
data () {
  return {
    register: {
      province: this.data.registerProvinceCode,
      city: this.data.registerCityCode,
      area: this.data.registerAreaCode
    } || {},
  }
}
methods: {
  getRegisterAddress (address, addressName) {
    console.log('register-address:', address)
    this.register = address
    if (JSON.stringify(addressName) !== '{}') { // 用于提交表单
      this.addParams.registerProvinceName = addressName.provinceName
      this.addParams.registerCityName = addressName.cityName
      this.addParams.registerAreaName = addressName.areaName
    }
    if (JSON.stringify(address) !== '{}') { // 用于校验下拉表单是否未选择
      this.checkFocus('register')
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • Vue下拉选择框Select组件使用详解(一)

    本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下: 展开图如下: ①创建组件Select.vue:预设两种主题色,亦可视情况进行自定义修改样式: <template>   <div class="m-select-wrap">     <input       :class="['u-select-input f16', color === 'blue' ? '' : 'white-color'

  • Vue下拉选择框Select组件使用详解(二)

    本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下: 下拉组件宽度可自定义设置以下属性: ①下拉组件宽度width属性,默认宽度290 ②placeholder属性 ③是否禁用下拉的disabled属性 已预设下拉列表最多8条,超过时滚动显示,具体可自定义调整,如果下拉选项过长省略号显示,鼠标悬浮显示全称,由于业务需求,设置mode属性,区别默认name和value  与  dictKey和dictVal ①创建组件Select.vue <tem

  • 在vue中实现点击选择框阻止弹出层消失的方法

    在vue项目中,选择性别是用的一个弹出层, <div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">选择</li> <li> <label>男</labe

  • vue select选择框数据变化监听方法

    1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu

  • Vue实现省市区级联下拉选择框

    本文实例为大家分享了Vue实现省市区级联下拉选择框的具体代码,供大家参考,具体内容如下 以(Vue下拉选择框Select组件二)为基础实现省市区级联下拉选择框组件 (业务需要,固定省份选择为贵州,没有此业务,不传disabled属性即可) 效果图如下: ①创建级联下拉选择Cascader.vue组件 <template>   <div class="m-cascader-wrap">     <Select       class="mr10&q

  • 多级联动下拉选择框,动态获取下一级

    多级联动下拉选择框,动态获取下一级,每一级数据为XML,可支持无限级(浏览器端需要Microsoft.XMLDOM支持) 项目需要,一个材料类别表,三级,总共有7000多条记录,如果一次获取会很慢的,所以就是用了动态读取,每次就读一级,且服务器端使用了缓存,效率还不错. HTML代码如下: <select name="MaterialClass1" ChildSelectName="MaterialClass2"></select><s

  • 基于jQuery下拉选择框插件支持单选多选功能代码

    由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

  • js下拉选择框与输入框联动实现添加选中值到输入框的方法

    本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来. 运行截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-value-to-input-codes/ 具体代码如下: <html> <

  • JS实现的5级联动Select下拉选择框实例

    本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se

  • JS简单设置下拉选择框默认值的方法

    本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

  • python+selenium select下拉选择框定位处理方法

    一.前言 总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPath,使用find_element_by_xpath定位: driver = webdriver.Firefox() driver.get("https://www.baidu.com/") driver.find_element_by_xpath().click() 三.间接定位(Sel

  • Layui动态生成select下拉选择框不显示的解决方法

    给代码添加如下部分: layui.use('form', function(){ //此段代码必不可少 var form = layui.form; form.render(); }); 实现效果: HTML代码: <div class="layui-form-item"> <label class="layui-form-label">执行周期</label> <div class="layui-input-in

随机推荐