一 代码

<template><el-dialog:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'":close-on-click-modal="false":visible.sync="visible"><el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"label-width="80px"><el-form-item label="编码" prop="code"><el-input v-model="dataForm.code" :disabled="disabled" placeholder="公司编码"></el-input></el-form-item><el-form-item label="名称" prop="name"><el-input v-model="dataForm.name" :disabled="disabled" placeholder="公司名称"></el-input></el-form-item><!-- 省/市/区级联选择控件--><el-form-item label="省/市/区"><el-cascaderref="cas"expand-trigger="hover"v-model="selectedOptions":options="options"style="width: 100%;@change="handleChange"></el-cascader></el-form-item><!-- 显示选择的省/市/区--><el-form-item label="所在省" prop="province"><el-input v-model="dataForm.province" :disabled="disabled" placeholder="所在省"></el-input></el-form-item><el-form-item label="所在市" prop="city"><el-input v-model="dataForm.city" :disabled="disabled" placeholder="所在市"></el-input></el-form-item><el-form-item label="所在区县" prop="district"><el-input v-model="dataForm.district" :disabled="disabled" placeholder="所在区县"></el-input></el-form-item><el-form-item label="所在街道" prop="address"><el-input v-model="dataForm.address" :disabled="disabled" placeholder="所在街道"></el-input></el-form-item><el-form-item label="法人" prop="legalPerson"><el-input v-model="dataForm.legalPerson" :disabled="disabled" placeholder="法人"></el-input></el-form-item><el-form-item label="联系人" prop="contactPerson"><el-input v-model="dataForm.contactPerson" :disabled="disabled" placeholder="联系人"></el-input></el-form-item><el-form-item label="联系电话" prop="contactPhone"><el-input v-model="dataForm.contactPhone" :disabled="disabled" placeholder="联系电话"></el-input></el-form-item><el-form-item label="签约名称" prop="signatureName"><el-input v-model="dataForm.signatureName" :disabled="disabled" placeholder="签约名称"></el-input></el-form-item><el-form-item label="是否测试" size="mini" prop="test"><el-radio-group v-model="dataForm.test"><el-radio :label="0">是</el-radio><el-radio :label="1">否</el-radio></el-radio-group></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="visible = false">取消</el-button><el-button v-if="!disabled" type="primary" @click="dataFormSubmit()">确定</el-button></span></el-dialog>
</template><script>export default {data () {return {selectedOptions: [], // 省/市/区级联选择控件用此数据options: [], // 省/市/区级联选择控件用此数据visible: false,dataForm: {id: 0,code: '',name: '',province: '', // 省city: '', // 市district: '', // 区address: '',legalPerson: '',contactPerson: '',contactPhone: '',test: '',switch1: '',switch2: '',switch3: '',visitDurationMax: '',switch4: '',switch5: '',switch6: '',medicalRepresentativeFilingCheckSwitch: '',photoSwitch: '',doctorAnonymousSwitch: '',onePageTemplateOption: '',locationCheckSwitch: '',invoiceMoney: '',checkUser: '',checkTime: '',checkState: '',checkRemark: '',createUser: '',createTime: '',updateUser: '',updateTime: '',bankCardNumber: '',bankName: '',dailyProductCustomerVisitCountMax: '',monthlyProductCustomerVisitCountMax: '',dataInputDelayDay: '',isAllowOffSiteInputVisit: '',dailyVisitCustomerActivityMax: '',signatureName: '',loginNames: '',switch8: '',visitMoveTime: '',monthlyAmountQuotaReminder: '',monthlyAmountQuotaMaximum: '',visitStyles: '',visitTypes: '',index1MaxCount: '',index2MaxCount: '',index3MaxCount: '',index4MaxCount: '',researchStyles: '',researchTypes: '',businessTypeList: '',isOverdue: '',annualAmountQuota: ''},dataRule: {name: [{required: true, message: '名称不能为空', trigger: 'blur'}]}}},methods: {init (id, disabled) {this.disabled = disabledthis.dataForm.id = id || ''this.visible = truethis.$nextTick(() => {this.$refs['dataForm'].resetFields()if (this.dataForm.id) {this.$http({url: `/base/company/info/${this.dataForm.id}`,method: 'get'}).then(({data}) => {if (data && data.code === 0) {this.dataForm = data.company}})}// 获取省市区树型列表this.$http({url: `/base/division/pcd`,method: 'get'}).then(({data}) => {if (data && data.code === 0) {// eslint-disable-next-line no-useless-escapethis.options = JSON.parse(JSON.stringify(data.options).replace(/\"children"\:\[]/g, '"no":0'))}})})},// 表单提交dataFormSubmit () {this.$refs['dataForm'].validate((valid) => {if (valid) {this.$http({url: `/base/company/${!this.dataForm.id ? 'save' : 'update'}`,method: 'post',data: this.dataForm}).then(({data}) => {if (data && data.code === 0) {this.$message({message: '操作成功',type: 'success',duration: 1500})this.visible = falsethis.$emit('refreshDataList')}})}})},// 省市区选择处理handleChange (value) {let areaName = this.$refs.cas.getCheckedNodes()[0].pathLabelsthis.dataForm.province = areaName[0]this.dataForm.city = areaName[1]this.dataForm.district = areaName[2]}}}
</script>

二 测试

1 选择省市区

2 填充所在省、所在省、所在区，点击确定后，就可把选择的省市区存到后端数据库

三 参考

开发过程中遇到的形形色色的问题，可参考下面案例。

1 <elselect> 无法回显问题

https://www.bilibili.com/video/BV1np4y1C7Yf?p=74&spm_id_from=pageDriver&vd_source=668cbcfea0e58aaad4fe64d45cc738d2

2 前端使用elementui的级联选择器去显示省市区

https://blog.csdn.net/fortunate_leixin/article/details/120891798

3 el-cascader级联展开时,无法定位到子节点,去除末节点的children

https://blog.csdn.net/m0_38004177/article/details/107014243

4 el-cascader样式错乱

https://www.cnblogs.com/yuedy/articles/13235739.html

https://blog.csdn.net/liubangbo/article/details/125640914

5 el-cascader 显示 label 的值

https://blog.csdn.net/qq_53755493/article/details/127868836

6 vue + element-ui 实现省市区三级联动选择组件

https://blog.csdn.net/keke11211/article/details/119780670