1. 程式人生 > >vue系列---基於 Element UI 的省市區街道聯動選擇元件

vue系列---基於 Element UI 的省市區街道聯動選擇元件

vue-area-linkage

省市區聯動選擇,基於 Element UI. 組合資料來源:area-data

下載元件:

npm i --save vue-area-linkage

引入元件在 main.js:

import Vue from 'vue';
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

在元件中進行應用:

// basic
<area-select v-model="selected"></area-select>
<area-cascader
v-model="selected2"></area-cascader> //setting <div class="areainp"><area-cascader type='text' :level='1' v-model="value1" placeholder="請選擇地址"></area-cascader></div>

頁面展示效果:
這裡寫圖片描述

相關推薦

vue系列---基於 Element UI省市區街道聯動選擇元件

vue-area-linkage 省市區聯動選擇,基於 Element UI. 組合資料來源:area-data 下載元件: npm i --save vue-area-linkage 引入元件

element ui省市區三級聯動-遇到的問題

一、省市區資料來源 百度了很多,只有一個官方資料來源是國家統計局官網的http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2017/11/01/110101.html,但是不是能直接用在程式碼中的,也看到了別人自己寫的json格式,覺得都不是

基於Element UI Cascader 級聯選擇器的中國省市區級聯數據

省市區三級聯動 col 在線演示 例如 三級聯動 nbsp bsp html 中國 安裝 npm install element-china-area-data -save 在線演示:https://plortinus.github.io/element-china-a

vue仿京東省市區三級聯動選擇元件

export default { name: 'myAddress', data () { return { showChose: false, showProvince: true, showCity: false, showDistr

基於element ui下拉框的省市二級聯動Vue元件

本人Vue小白,程式碼比較粗陋簡單,歡迎指導。 以下原始碼基於element ui下拉框,對外輸出為選擇省、市的城市編碼,提供重置的方法。 json檔案檢視另一篇文章: https://blog.csdn.net/u013253924/article/details/84334144

Element-UI省市區(縣)三級聯動---基於VUX移動框架的x-address元件

Element-UI 省市區(縣)三級聯動 由於公司移動端使用的是Vux的UI框架,該框架有x-address元件,其中包含了省市縣的資料,通過Element-UI實現與其相同的省市區(縣)三級聯動。 Vux中x-address對全國省市區的資料進行了封裝,引入

基於vueElement-ui定義自己的select元件

基於vue的Element-ui定義自己的select元件 <template> <div> <el-select v-model="svalue" placeholder="請選擇" filterable> <el-opti

vue基於element-ui的三級CheckBox複選框

最近vue專案需要用到三級CheckBox複選框,需要實現全選反選不確定三種狀態。但是element-ui table只支援多選行,並不能支援三級及以上的多選,所以寫了這篇部落格以後學習使用。 效果圖預覽: 首先是頁面佈局,當然也可已使用table,但是自己用flex佈局後面更容易增刪改查其他功能 1

基於vue.js 2.0,不使用webpack的nodejs服務,只在瀏覽器上單獨使用在Element UI的Tree樹形控制元件

Vue.js(讀音 /vjuː/,類似於 view) 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與單檔案元件和 Vue

基於vue-cli-和element-ui的開發admin(1)

//首先以下僅是記錄個人本次vue後臺管理系統的登入介面部分操作的流程以及踩坑的注意點 一、首先是搭建vue-cli工作環境   這裡有兩種方式:1.用npm;(在安裝了vue,vue-cli以及webpack情況下,cd到要工作的區域,使用命令列vue init webpack(專案名稱)然後開始搭建);

vue中使用Element-UI

them scrip card sheet css ren -c cnblogs eight Element-UI是一套基於Vue2.0的UI組件庫,http://element.eleme.io/#/zh-CN/component/carousel 首先npm insta

Vue 添加element UI

時間 配置 spa 如何配置 來替 ins tar vue-cli 更改 根據文檔.按需加載模塊需要配置(若不是按需加載則不用改這個文件) .babelrc文件; er vue-cli預先生成的文件內容是: { "presets": [ ["env", {

基於element-ui的多選下拉框和tag標簽的二次封裝

line ron click opacity ext width 顯示 模塊 scss 前言: 今年這大半年我主要負責公司的後臺教務管理的開發,這個管理系統目前主要是給公司的內部人員去配置公司的核心項目(例如:熊貓小課)的所有數據,例如課程的配置、課程期數的配置、課程版本

Vue專案中Element-Ui按需引入

重點:不管是全部引入還是按需引入,都要安裝element-ui的。   npm i element-ui -D 完事後可以在package.json的dev標籤下看到element。 npm i element-ui -D (解釋一下:npm是node包管理器,i是insta

vue同時使用element-ui和mint-ui,.babelrc怎麼寫

首先安裝: cnpm i element-ui -S //安裝element-ui cnpm i mint-ui -S //安裝mint-ui 為了減小專案體積,為了引入外掛或者元件時會自動引入相應的 CSS 檔案,咱們按需引入,所以藉助: babel-plugin-com

1.Vue + Vue Router + Vuex + Element-UI(二)之Vuex

1.Vuex是什麼東西? 包含以下部分: 狀態:state,這是真理,推動我們的應用程式的來源。 檢視:一個宣告性對映狀態; 這些動作是狀態可能因檢視中的使用者輸入而改變的方式。 是單向資料流:如圖: 如下程式碼結構如下: 詳細解析store,如圖所示:

1.Vue + Vue Router + Vuex + Element-UI(一)

1.Vue全家桶學習結合實際專案學習案例如下: vue.js目錄結構如下: 相關目錄解析如下: build:專案構建(webpack)相關程式碼 如圖: config:配置目錄,包括埠號,我們初學可以使用預設的; node_modules是使用npm安裝了相

vue中使用element-ui監聽鍵盤事件

  vue中element-ui在使用el-input的時候,由於el-input在輸入框的外層添加了一層的<div class="el-input"></div>,把input隱藏在子級,所以el-input新增上了keyup無響應; <el

VUE專案使用Element-ui 下拉元件的驗證失效問題

Element-ui 下拉元件的驗證失效問題 問題描述: 在使用Element-ui元件做專案開發時候有可能會使用下拉框元件,如果下拉框元件的option選項是使用v-if指令遍歷的, 這樣也沒有問題,但是如果加上multiple屬性,也就是可以多選 就會出現下拉框驗證時失效問題.

vue-cli+vuex+element-ui+mint-ui後臺管理系統總結

1.驗證碼倒計時 使用者點選“傳送驗證碼”的按鈕以後,在60s內不可以再次點選,並開啟60s倒計時功能 <template> <el-button @click="postPhoneCode" v-if="phoneCodeStatus"&