vue+element-china-area-data实现地区选择器
下载包
npm i element-china-area-data --s
在表格中展示
<el-table-column label="行政区域" align="center"><template slot-scope="scope">{{formatCodeToText(scope.row.region) }}</template></el-table-column>
form表单中使用
<el-form-item label="行政区域" prop="region"><el-cascader size="large" :options="regionOpt" v-model="form.region" @change="handleChange" style="width: 300px"></el-cascader></el-form-item>
js区域
<script>import {regionData, CodeToText } from "element-china-area-data";export default {data() {return {form:{region:""}regionOpt: regionData,};},methods: {handleChange(value) {console.log(value);},getCodeToText(codeStr) {console.log(codeStr, "codeStr");let codeArray = [];if (codeStr) {codeArray = JSON.parse(codeStr);}let area = "";switch (codeArray.length) {case 1:area += CodeToText[codeArray[0]];break;case 2:area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];break;case 3:area +=CodeToText[codeArray[0]] +"/" +CodeToText[codeArray[1]] +"/" +CodeToText[codeArray[2]];break;default:break;}return area;},},};</script>
表单中回显
// 编辑editList (row) {this.Sign = "edit";this.title = "编辑";this.dialogVisible = true;this.form = JSON.parse(JSON.stringify({...row,region: row.region ? JSON.parse(row.region) : [],}));},
