vue 前端使用 element-ui 实现省市级联动

最近用 vue 结合 element-ui 写了个省市级联动，由于是纯前端，故而用了 “ 死数据 ”

代码如下：

<template><div><el-form label-width="20px"><el-row :gutter="20"><el-col :span="8"><el-form-item label='省'><el-select v-model="prov" @change="changeprov(prov)"><el-optionv-for="item in provArr":key="item.vinceId":label="item.vince":value="item.vince"type="text"style="margin-right: 20px"/></el-select></el-form-item></el-col><el-col :span="8"><el-form-item label='市'><el-select v-model='city' @change="changecity"> <el-optionv-for="item in cityArr":key="item.id":label="item.label":value="item.label"type="text"style="margin-right: 20px"/></el-select></el-form-item></el-col></el-row></el-form></div>
</template>

<script>export default {data() {return {provArr: [], // 省份cityArr: [], // 城市city: '', // 选中的城市prov: '', // 选中的省份cityALL: [{vince: "上海市",vinceId: "1",children: [{ city: "1", label: "徐汇区" },{ city: "2", label: "虹口区" },{ city: "3", label: "黄浦区" },{ city: "4", label: "杨浦区" },{ city: "5", label: "金山区" },{ city: "6", label: "松江区" },{ city: "7", label: "闵行区" },],},{vince: "北京市",vinceId: "2",children: [{ city: "1", label: "朝阳区" },{ city: "2", label: "宣武区" },{ city: "3", label: "崇文区" },{ city: "4", label: "东城区" },{ city: "5", label: "西城区" },{ city: "6", label: "海淀区" },{ city: "7", label: "通州区" },],},],};},created() {},mounted() {},beforeMount () {this.changeprov()},watch :{// 监听 省份的变化 省份发生变化时，城市清空prov (newVal,oldVal) {console.log(newVal,'ll;')console.log(oldVal,'jjk')if (oldVal !== newVal) {this.city = ''console.log(this.city,'2321')}},},methods: {// 省 change 事件changeprov(val) {// 获取对应的省份this.cityALL.filter(item =>{if (val == item.vince) {return item.vince == val} })// 获取省份this.provArr = this.cityALL// 获取城市for (var i in this.cityALL) {var obj = this.cityALL[i]if (obj.vince) {if (obj.vince == this.prov) {this.cityArr = obj.children}}}},// 城市 change 事件changecity() {console.log('o213p',this.city)}},};
</script>

以上代码如有问题，还请告知。

vue 前端使用 element-ui 实现省市级联动相关推荐

基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
前端漫漫-Element UI报错：Unknown custom element: ＜el-menu＞
前端漫漫-Element UI报错:Unknown custom element: 问题描述:编写VUE文件,从Element UI官网复制组件信息的时候,引用了Element UI的html标签,但 ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
Vue 篇解决ELement UI 中表单验证(多层Object嵌套)
项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证问题描述因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...

vue 前端使用 element-ui 实现省市级联动

vue 前端使用 element-ui 实现省市级联动相关推荐

最新文章

热门文章