vue element ui使用选择器实现地区选择

这篇具有很好参考价值的文章主要介绍了vue element ui使用选择器实现地区选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

两种方法

一、使用普通选择器组件

1、界面,使用了四个下拉框分别选择省市区街道

<el-form-item label="地区" required>
  <div class="u-f ">
    <el-form-item prop="province" style="margin-right:10px">
      <el-select v-model="addressform.province" placeholder="请选择省" size="small" filterable
        @change="addressSelect(addressform.province,2)">
        <el-option v-for="item in provinceOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="city" style="margin-right:10px">
      <el-select v-model="addressform.city" placeholder="请选择市" size="small" filterable
        @change="addressSelect(addressform.city,3)">
        <el-option v-for="item in cityOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="county" style="margin-right:10px">
      <el-select v-model="addressform.county" placeholder="请选择区" size="small" filterable
        @change="addressSelect(addressform.county,4)">
        <el-option v-for="item in districtOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="street" style="margin-right:10px">
      <el-select v-model="addressform.street" placeholder="请选择镇" size="small" filterable
        @change="addressSelect(addressform.street,5)">
        <el-option v-for="item in townOptions" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</el-form-item>

2、方法

//地区下拉框选择事件
addressSelect(data, index) {
  let addressCode = ''
//选择任意下拉框需把下一个下拉框清空再获取
  switch (index) {
    case 2:
      this.cityOptions = []
      this.districtOptions = []
      this.townOptions = []
      this.addressform.city = ''
      this.addressform.county = ''
      this.addressform.street = ''
      addressCode = this.provinceOptions.find(a => a.name == data).code//获取code调接口获取下一级 下方同理
      break;
    case 3:
      this.districtOptions = []
      this.townOptions = []
      this.addressform.county = ''
      this.addressform.street = ''
      addressCode = this.cityOptions.find(a => a.name == data).code
      break;
    case 4:
      this.townOptions = []
      this.addressform.street = ''
      addressCode = this.districtOptions.find(a => a.name == data).code
      break;
    default:
      break;
  }
  if (index == 5) { //此需求是省市区需要中文汉字(name)传给后台,街道需要代码(code)
    this.addressform.addressCode = this.townOptions.find(a => a.name == data).code
    return
  }
  this.getCitys(addressCode, index)
},



//获取地区下拉框方法
getCitys(code = '', level = 1) {
  getCitys({//获取地区的接口
    parentCode: code + '',
    level: level
  }).then(res => {
    switch (level) {
      case 1:
        this.provinceOptions = res
        break;
      case 2:
        this.cityOptions = res
        break;
      case 3:
        this.districtOptions = res
        break;
      case 4:
        this.townOptions = res
        break;
      default:
        break;
    }
  })
},

二、使用练级选择器动态加载实现

1、组件

<template>
  <div class="cascaderArea">
    <el-cascader :props="props" ref="cascader" :disabled='disabled' v-model="addressValue" placeholder="请选择行政区域"
      @change="handleChange" size="small" style="width: 100%"></el-cascader>
  </div>
</template>
<script>
  import {
    getCitys
  } from '@/api/address'
  export default {
    props: {
      addressValue: {
        type: Array,
        default: () => {
          return []
        }
      },
      disabled: {
        type: Boolean,
        default: () => {
          return false
        }
      },
    },
    name: 'cascaderArea',
    data() {
      return {
        selectedOptions: [],
        props: {
          lazy: true,
          lazyLoad: (node, resolve) => {
            const {
              level
            } = node // node 节点数据 
            const nodes = [] // 动态节点
            let type = level == 0 ? "" : node.value // 0 代表第一次请求
            getCitys({
                parentCode: type,
                level: level + 1
              }).then((res) => {
                res.map((item) => {
                  let area = {
                    value: item.code,
                    label: item.name,
                    leaf: node.level >= 3,
                  };
                  nodes.push(area)
                });
                resolve(nodes) // 回调
              })
              .catch((error) => {
                console.log(error)
              })
          },
        }
      }
    },
    watch: {
      addressValue: {
        handler(n, o) {
          this.selectedOptions = n
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleChange(values) { // 选择的行政区
        let labels = this.$refs.cascader.getCheckedNodes()[0].pathLabels
        this.$emit('getSelectedOptions', {
          values,
          labels
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
</style>

2、使用

如果有回显的需求,需要组件上加上v-if使其重新加载,否则会数据回显异常文章来源地址https://www.toymoban.com/news/detail-699038.html

<CascaderArea :addressValue="address" :disabled="false"  v-if="address.length>0" @getSelectedOptions='getSelectedOptions' />//使用v-if 防止组件回显异常

import CascaderArea from "@/components/SelectAddress/index.vue";//引入

components: {
  CascaderArea
},

getSelectedOptions(val) {
  this.selectedOptions = val
}

到了这里,关于vue element ui使用选择器实现地区选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js 中使用 Element UI 实现异步加载分页列表

    在前端开发中,我们常常需要展示大量数据,并提供分页浏览的功能。本篇博客将介绍如何使用 Vue.js 和 Element UI 组件库创建一个简单的异步加载分页列表。 Vue.js Element UI JavaScript 我们将创建一个包含表格和分页组件的 Vue 单文件组件。以下是组件的基本结构: 引入 Element U

    2024年02月04日
    浏览(57)
  • vue2 element ui 实现图标下拉选择

    1.展示效果 代码展示: (1)封装icon.js (2) 在需要使用的页面复制进去 (3)在自己需要使用的地方复制进去 (4)css样式部分 (5)初始化数据

    2024年02月10日
    浏览(47)
  • 基于vue+element ui实现下拉表格选择组件

    根据https://lolicode.gitee.io/scui-doc/demo/#/dashboard里的组件修改

    2024年02月16日
    浏览(56)
  • vue element-ui blur触发事件 vue中使用@blur获取input val值 elementui+vue

    vue中使用@blur获取input val值

    2024年02月11日
    浏览(50)
  • [VUE]Element_UI 实现TreeSelect 树形选择器

    最近在做一个人员管理系统,在增改用户信息时,可能会设置用户所在的部门,因为部门是多级的,于是想到用Element_UI的TreeSelect组件实现 效果: 安装完成后,打开package.json 可以看到@riophae/vue-treeselect的版本: 在需要使用TreeSelect的组件中引入 并将Treeselect加到components中:

    2024年02月09日
    浏览(41)
  • 【vue + element ui】ColorPicker 颜色选择器的使用

    组件提供的 ColorPicker 颜色选择器不能满足实际需求,所以在此基础上使用了自定义的方式进行使用 我这边的使用场景是 ColorPicker 与 el-input 输入框的联动使用,在这里参考了下面博主的文章 https://blog.csdn.net/s1441101265/article/details/109672819 1.自定义组件 inputColor.vue 2.父组件引入该

    2024年02月04日
    浏览(35)
  • vue element ui el-date-picker(日期选择器)实现联动联级选择效果。

    页面上有三个 日期选则器。第一个只能选择月份,第二个是 年月, 第三个是年月日 。 然后第一个选择完毕 第二个、第三个自动带出年 。第二个选择月 第三个自动带出月。  思路: 就是 一个简单的赋值 。第一个 change里 给第二个和第三个赋值 。第二个change里给第三个赋

    2024年02月16日
    浏览(61)
  • vue中使用element-ui ,设置级联选择器高度问题

    我本来以为设置elemnt-ui组件样式需要用到深度选择器,然后找了好多关于深度选择器的,比如 /deep/ ::v-deep 后来才明白是权重不够,解决方法如下 1、在全局css中设置 缺点:所有级联选择器的高度都是固定的 结论:只有在所有页面级联选择器都一致的情况下或者只有一个级联

    2024年02月12日
    浏览(46)
  • Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

    用vue+element ui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下: 代码文件结构: 废话不多说,直接上代码: 第一步:新建名为 TableHeaderRender.vue 的文件 template   el-popover     placement=\\\"bottom\\\"     width=\\\"2

    2024年02月02日
    浏览(65)
  • 使用 Element UI 和 Vue.js 搭建电商商城系统

    作者:禅与计算机程序设计艺术 电商商城系统作为传统互联网行业的标杆,在近几年已经成为各大公司必不可少的业务系统之一。但是,构建一个成熟的电商商城系统仍然具有诸多挑战。例如,功能模块繁多、用户交互复杂、界面呈现效果丰富、数据量大等。为了解决这些问

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包