<tr>//格式// required自定义指令<e-td :required="!read" label><span>地区：</span></e-td><td>//v-if="!read && this.data.nationCode == 148"显示逻辑<divclass="table-cell-flex"style="width:450px"v-if="!read && this.data.nationCode == 148"><el-form-item prop="nationCode" class="address"><el-selectplaceholder="国家"v-model="data.nationCode"@change="getprovince(data.nationCode, 1)">//change事件单独使用不生效需要watch监听一下<el-optionv-for="item in nationList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item><el-form-item prop="proviceCode" class="address"><el-selectplaceholder="省级地区"v-model="data.proviceCode"@change="getCityList(data.proviceCode, 1)"><el-optionv-for="item in proviceList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item><el-form-item class="el-form-item" prop="cityCode"><el-selectplaceholder="市级地区"v-model="data.cityCode"@change="getCountyList(data.cityCode, 1)"><el-optionv-for="item in cityList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item><el-form-item class="el-form-item" prop="countyCode"><el-select@change="getCountyName(data.countyCode, 1)"v-model="data.countyCode"placeholder="区级地区"><el-optionv-for="item in countyList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item></div><divclass="table-cell-flex"style="width:450px"v-else-if="!read && this.data.nationCode != 148"><el-form-item prop="nationCode" class="address"><el-selectplaceholder="国家"v-model="data.nationCode"@change="getprovince(data.nationCode, 1)"><el-optionv-for="item in nationList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item><div class="el-form-item"><el-form-item class="address"><el-selectplaceholder="省级地区"v-model="data.proviceCode"@change="getCityList(data.proviceCode, 1)"><el-optionv-for="item in proviceList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item></div><div class="el-form-item"><el-form-item class="el-form-item"><el-selectplaceholder="市级地区"v-model="data.cityCode"@change="getCountyList(data.cityCode, 1)"><el-optionv-for="item in cityList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item></div><div class="el-form-item"><el-form-item class="el-form-item"><el-select@change="getCountyName(data.countyCode, 1)"v-model="data.countyCode"placeholder="区级地区"><el-optionv-for="item in countyList":key="item.code":label="item.codeName":value="item.codeCode"></el-option></el-select></el-form-item></div></div><span v-else><template v-if="data.nationProviceCityName"><span:style="equal('nationProviceCityName',data.nationProviceCityName)">{{ data.nationProviceCityName }}</span></template><template v-else-if="data.regProvinceAndCityAndCountyName"><span:style="equal('regProvinceAndCityAndCountyName',data.regProvinceAndCityAndCountyName)">{{ data.regProvinceAndCityAndCountyName }}</span></template><template v-else><span :style="equal('proviceName', data.proviceName)">{{data.proviceName}}</span><span :style="equal('cityName', data.cityName)">{{data.cityName}}</span><span :style="equal('countyName', data.countyName)">{{data.countyName}}</span></template></span></td><e-td :required="!read" label><span>详细地址：</span></e-td><td><div class="table-cell-flex"><el-form-item v-if="!read" prop="compAddress"><el-inputv-model="data.compAddress"@keydown.delete.native="onDeleteKeyDown"@keydown.native="onKeyDown"@compositionstart.native="onCompositionStart"@compositionend.native="compositionend"placeholder="请输入详细地址"></el-input></el-form-item><spanv-else:style="equal('compAddress', data.compAddress)">{{ data.compAddress }}</span></div></td></tr>

watch: {
//监听用来联动和获取选择的名称，并且区分是手动修改还是初始化  不区分之前内容会被清空这样修改的时候再清空详细地址// 国家'data.nationCode': {handler: function(newval, oldval) {console.log(newval, 'new')console.log(oldval, 'old')if (newval) {this.getprovince(newval)}},immediate: true},// 省级地区'data.proviceCode': {handler: function(newval, oldval) {console.log(newval, 'new')console.log(oldval, 'old')if (newval) {this.getCityList(newval)}},immediate: true},'data.cityCode': {handler: function(newval, oldval) {console.log(newval, 'new')console.log(oldval, 'old')if (newval) {this.getCountyList(newval)}},immediate: true},'data.countyCode': {handler: function(newval) {if (newval) {this.getCountyName(newval)}},immediate: true},},methods: {// 获取国家async getnationList() {let params = {classCode: 'countryRegionsAndProvinces',higherCode: 0}let data = await this.$api.common.getDictionary(params)if (data) {this.nationList = data}},// 获取省市async getprovince(val, isempty) {let params = {classCode: 'countryRegionsAndProvinces',higherCode: val}//代码可以自行简化let data = await this.$api.common.getDictionary(params)if (data) {this.proviceList = dataif (isempty == 1) {this.proviceName = ''this.cityName = ''this.countyName = ''this.data.compAddress = ''this.data.proviceCode = ''this.data.cityCode = ''this.data.countyCode = ''this.cityList = []this.countyList = []}},// 获取城市async getCityList(code, isempty) {let params = {classCode: 'countryRegionsAndProvinces',higherCode: code}let data = await this.$api.common.getDictionary(params)if (data) {this.cityList = dataif (isempty == 1) {this.cityName = ''this.countyName = ''this.data.cityCode = ''this.data.countyCode = ''this.countyList = []this.proviceName = this.getRessName(this.data.proviceCode,this.proviceList)this.data.compAddress =this.proviceName + this.cityName + this.countyNamethis.ress = this.proviceName + this.cityName + this.countyName}}},// 获取乡镇async getCountyList(code, isempty) {let params = {classCode: 'countryRegionsAndProvinces',higherCode: code}let data = await this.$api.common.getDictionary(params)if (data) {this.countyList = dataif (isempty == 1) {this.cityName = ''this.data.countyCode = ''this.countyName = ''this.proviceName = this.getRessName(this.data.proviceCode,this.proviceList)this.cityName = this.getRessName(this.data.cityCode, this.cityList)this.data.compAddress =this.proviceName + this.cityName + this.countyName//ress data里记得定义一下用来获取选择的地址的长度在输入的时候做校验用this.ress = this.proviceName + this.cityName + this.countyName}}},getCountyName(val, isempty) {if (isempty == 1) {this.countyName = ''this.proviceName = this.getRessName(this.data.proviceCode,this.proviceList)this.cityName = this.getRessName(this.data.cityCode, this.cityList)this.countyName = this.getRessName(this.data.countyCode,this.countyList)this.data.compAddress =this.proviceName + this.cityName + this.countyNamethis.ress = this.proviceName + this.cityName + this.countyName}},// 输入限制onDeleteKeyDown(e) {let { selectionStart, selectionEnd } = e.target// 如果包含不能删除的区域位置，阻止删除if (!(selectionStart > this.ress.length || selectionEnd < 0)) {e.preventDefault()}},onKeyDown(e) {// 如果包含不能删除的区域，禁止if (!(e.target.selectionStart > this.ress.length - 1 ||e.target.selectionEnd < 0)) {e.preventDefault()}},// 输入法键盘字符下不可输入，记录输入的起始位置onCompositionStart(e) {this.checkText = e.data //记录选中的文字this.startVal = e.target.selectionStart},// 当在不可编辑的范围内输入时结合输入文字开始位置this.startVal和输入结束// e.target.selectionEnd位置，通过字符串截取并接还原原来的字符。compositionend(e) {if (this.startVal !== null) {this.$nextTick(() => {if (this.startVal < this.ress.length) {let targetVal = e.target.valuelet startTarget = targetVal.substring(0, this.startVal)let endTarget = targetVal.substring(e.target.selectionEnd)e.target.value = startTarget + this.checkText + endTarget}})}},//	获取省市区名称getRessName(codeCode, arr) {return arr.find(o => o.id == Number(codeCode))? arr.find(o => o.id == Number(codeCode)).codeName: ''},}