使用vue+element ui 實現省市區三級聯動

netScorpion 發布于2021-11-11 16:54 / 974人閱讀

摘要：使用實現省市區三級聯動開發工具使用技術效果圖如下話不多說上代碼一，頁面部分二，部分首先引入以下代碼注意引入上方代碼之前需先運行下方代碼進行安裝然后再寫入以下代碼這樣一個省市區三級聯動的下拉列表就完成了

使用vue+element ui 實現省市區三級聯動

開發工具 Hbuilder x
使用技術vue2+Element ui

效果圖如下???

話不多說上代碼?

一，頁面部分

<template>	<div>	    <el-cascader	      size="large"	      :options="city"	      v-model="selectedOptions"	      @change="handleChange">	    </el-cascader>	  </div></template>

二，script部分

首先引入以下代碼

import { regionData } from "element-china-area-data"

注意！！！引入上方代碼之前需先運行下方代碼進行安裝

npm install element-china-area-data -S

然后再寫入以下代碼

export default {	    data () {	      return {	        city: regionData,	        selectedOptions: []	      }	    },		    methods: {	      handleChange (value) {	        console.log(value)	      }	    }	  }

這樣一個省市區三級聯動的下拉列表就完成了

云服務器 GPU云服務器省市三級聯動陜西 js省市縣三級聯動 ajax實現三級聯動 element-ui

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/122998.html

vue項目中使用element-ui下拉框選項值為對象時報錯

摘要：在做后臺管理時，使用了搭配，請求方法使用了插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。在做后臺管理時，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細，百度過幾篇文章，也沒有理解他們表達的意思，然后自己又去看文檔，把他的屬性看...

Drummor 2019-08-26 10:57 評論0 收藏0
vue 省市區三級聯動插件v-distpicker

摘要：十分便捷的三級聯動插件官網步驟下載步驟使用與引入在中注冊全局組件在文件中使用組件你需要用到三級聯動的頁面的里如何使用組件在該文件的部分寫廣東省廣州市海珠區移動端步驟如何獲取他們的數據給部分一個點擊事件在配置十分便捷的三級聯動插件官網：https://www.awesomes.cn/repo/... 步驟1：下載 npm install v-distpicker --save O...

learning 2019-08-23 18:02 評論0 收藏0
小白成長日記：寫個省市區三級聯動

摘要：數據來源臺灣缺省完成圖初始化選完省之后部分請選擇請選擇暫無數據暫無數據一開始的初始狀態是省份可以選擇，利用來控制市和區的現實選項。當省份未選擇時，市區因為沒有數據，所以會選擇暫無數據。依舊使用vue，不需要關注dom太方便了。數據來源（臺灣缺省）：https://github.com/airyland/c... 完成圖初始化 showImg(https://segmentfault...

JerryC 2019-08-21 17:51 評論0 收藏0
Vue.js資源分享

摘要：中文官網英文官網組織發出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業余之外抽出的時間有限，充分準備好應有的資源之后再發問，有利于問題能夠高效質量地得到解決。 Vue.js資源分享更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/maid...

vpants 2019-08-20 14:21 評論0 收藏0
原生js實現省市區三級聯動插件

原生js實現省市區三級聯動插件前言插件功能只滿足我司業務需求，如果希望有更多功能的，可在下方留言，我盡量擴展！如果你有需要或者喜歡的話，可以給我github來個star ? 倉庫地址在線預覽準備 // 頁面上先引入css與js文件頁面中的容器標簽不限制，只需給個id就行 var address = new Address({ wrapId: wrap, showArr...

mumumu 2019-08-26 11:43 評論0 收藏0