使用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)
}
}
}
這樣一個省市區三級聯動的下拉串列就完成了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/355304.html
標籤：其他
下一篇：軟體評測師考試學習計劃