摘要:使用實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)開(kāi)發(fā)工具使用技術(shù)效果圖如下話不多說(shuō)上代碼一,頁(yè)面部分二,部分首先引入以下代碼注意引入上方代碼之前需先運(yùn)行下方代碼進(jìn)行安裝然后再寫(xiě)入以下代碼這樣一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)的下拉列表就完成了
開(kāi)發(fā)工具 Hbuilder x
使用技術(shù)vue2+Element ui
效果圖如下???
話不多說(shuō) 上代碼?
<template> <div> <el-cascader size="large" :options="city" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div></template>
首先引入以下代碼
import { regionData } from "element-china-area-data"
注意!!! 引入上方代碼之前 需先運(yùn)行下方代碼進(jìn)行安裝
npm install element-china-area-data -S
然后再寫(xiě)入以下代碼
export default { data () { return { city: regionData, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } }
這樣一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)的下拉列表就完成了
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/122998.html
摘要:在做后臺(tái)管理時(shí),使用了搭配,請(qǐng)求方法使用了插件,在使用下拉框時(shí),因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值,因此需要傳入對(duì)象。 在做后臺(tái)管理時(shí),使用了vue搭配elementUI,請(qǐng)求方法使用了axios插件,在使用下拉框時(shí),因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值,因此需要傳入對(duì)象。對(duì)select下拉框的文檔沒(méi)有讀的很仔細(xì),百度過(guò)幾篇文章,也沒(méi)有理解他們表達(dá)的意思,然后自己又去看文檔,把他的屬性看...
摘要:十分便捷的三級(jí)聯(lián)動(dòng)插件官網(wǎng)步驟下載步驟使用與引入在中注冊(cè)全局組件在文件中使用組件你需要用到三級(jí)聯(lián)動(dòng)的頁(yè)面的里如何使用組件在該文件的部分寫(xiě)廣東省廣州市海珠區(qū)移動(dòng)端步驟如何獲取他們的數(shù)據(jù)給部分一個(gè)點(diǎn)擊事件在配置 十分便捷的三級(jí)聯(lián)動(dòng)插件 官網(wǎng):https://www.awesomes.cn/repo/... 步驟1:下載 npm install v-distpicker --save O...
摘要:數(shù)據(jù)來(lái)源臺(tái)灣缺省完成圖初始化選完省之后部分請(qǐng)選擇請(qǐng)選擇暫無(wú)數(shù)據(jù)暫無(wú)數(shù)據(jù)一開(kāi)始的初始狀態(tài)是省份可以選擇,利用來(lái)控制市和區(qū)的現(xiàn)實(shí)選項(xiàng)。當(dāng)省份未選擇時(shí),市區(qū)因?yàn)闆](méi)有數(shù)據(jù),所以會(huì)選擇暫無(wú)數(shù)據(jù)。 依舊使用vue,不需要關(guān)注dom太方便了。數(shù)據(jù)來(lái)源(臺(tái)灣缺省):https://github.com/airyland/c... 完成圖 初始化 showImg(https://segmentfault...
摘要:中文官網(wǎng)英文官網(wǎng)組織發(fā)出一個(gè)問(wèn)題之后,不要暫時(shí)的離開(kāi)電腦,如果沒(méi)有把握先不要提問(wèn)。珍惜每一次提問(wèn),感恩每一次反饋,每個(gè)人工作還是業(yè)余之外抽出的時(shí)間有限,充分準(zhǔn)備好應(yīng)有的資源之后再發(fā)問(wèn),有利于問(wèn)題能夠高效質(zhì)量地得到解決。 Vue.js資源分享 更多資源請(qǐng)Star:https://github.com/maidishike... 文章轉(zhuǎn)自:https://github.com/maid...
原生js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)插件 前言 插件功能只滿足我司業(yè)務(wù)需求,如果希望有更多功能的,可在下方留言,我盡量擴(kuò)展!如果你有需要或者喜歡的話,可以給我github來(lái)個(gè)star ? 倉(cāng)庫(kù)地址在線預(yù)覽 準(zhǔn)備 // 頁(yè)面上先引入css與js文件 頁(yè)面中的容器標(biāo)簽不限制,只需給個(gè)id就行 var address = new Address({ wrapId: wrap, showArr...
閱讀 1024·2021-11-22 14:56
閱讀 999·2021-11-11 16:54
閱讀 7819·2021-09-23 11:55
閱讀 3016·2021-09-22 15:57
閱讀 2799·2021-08-27 16:25
閱讀 675·2019-08-30 15:55
閱讀 1667·2019-08-30 15:43
閱讀 1602·2019-08-30 14:23