最近用 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 实现省市级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。