1裁赠、安裝庫
?npm install element-china-area-data -S //安裝
2频祝、解釋說明
//regionData 是省市區(qū)三級聯(lián)動數(shù)據(jù)（不帶“全部”選項(xiàng)）
//CodeToText 是個大對象臣疑，屬性是區(qū)域碼飒房，屬性值是漢字 用法例如：CodeToText[‘110000’]輸出北京市
//TextToCode? 后臺省市區(qū)顯示再頁面轉(zhuǎn)code欣舵，
//TextToCode['廣東省'].code亮靴， TextToCode['廣東省']['深圳市'].code,
//TextToCode['廣東省']['深圳市']['福田區(qū)'].code,分別是省市區(qū)code
3、代碼示例
<el-form-item label="所在區(qū)域" prop="area">
? ? ? <el-cascader
? ? ? ? :options="areaSelectData"
? ? ? ? @change="handleChange"
? ? ? ? class="full-width"
? ? ? ? size="large"
? ? ? ? v-model="form.selectedOptions"
? ? ? ? placeholder="請選擇您所在的城市"
? ? ? ? ? />
? </el-form-item>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
data(){
? return{
? ? areaSelectData: regionData,//省市區(qū)三級聯(lián)動數(shù)據(jù)
? }
}
? showEditDialog(row) {//showEditDialog為點(diǎn)擊編輯數(shù)據(jù)顯示的按鈕
? ? ? this.getList();
? ? ? this.dialogConsignee = true;
? ? ? this.form.selectedOptions = [
? ? ? ? TextToCode[this.list.province].code,
? ? ? ? TextToCode[this.list.province][this.list.city].code,
? ? ? ? TextToCode[this.list.province][this.list.city][this.list.area].code,
? ? ? ];
? ? },
handleChange(value) {
? ? ? //value為省市區(qū)code數(shù)組
? ? ? if (value) {
? ? ? ? var provinceCode = CodeToText[value[0]];//code轉(zhuǎn)為省
? ? ? ? var cityCode = CodeToText[value[1]];//市
? ? ? ? var orgion = CodeToText[value[2]];//區(qū)
? ? ? ? this.form.province = provinceCode;
? ? ? ? this.form.city = cityCode;
? ? ? ? this.form.area = orgion;
? ? ? ? // this.form.selectedOptions = provinceCode + cityCode + orgion;
? ? ? }
? },
