js输入框部分内容不可编辑，其余正常输入，el-input和el-select输入框和多个下拉框联动后的内容不可修改

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