输入框内容部分不可修改el-input部分动态内容不可修改完整代码 省市区联动，详细地址中省市区选择后不可更改

最新推荐文章于 2024-02-28 23:21:26 发布
最新推荐文章于 2024-02-28 23:21:26 发布
阅读量636 收藏 7
点赞数 7
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoyu007/article/details/134995456
版权

在这里插入图片描述

            <tr>
              <e-td :required="!read" label>
                <span>地区：</span>
              </e-td>
              <td>
                <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)"
                    >
                      <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
        : ''
    },
        }
前端记事本
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input框省市区三级联动选择
11-08
"input框省市区三级联动选择"是一种常见的用户输入方式，特别是在移动端应用中，它能够优化用户在选择地理位置时的体验。这种设计允许用户通过一个单一的输入框来完成省份、城市和区县的连续选择，减少了操作步骤，...
修改输入框placeholder文字默认颜色-webkit-input-placeholder方法
12-13
在网页设计中，输入框（`<input>`）的占位符（`placeholder`）属性是一种非常实用的功能，它可以在用户输入前提供提示文本。HTML5引入了这一原生属性，使得开发者能够轻松地在输入框中添加提示信息。默认情况下，...
Element UI关于 input禁止编辑
m0_58861443的博客
08-23 1万+
方法1: 添加 readonly 属性 readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。 <el-form-item label="部门" prop="departmentName"> <el-input readonly v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="hFocus"
Vue技能点--el-input输入框无法输入、无法修改问题
程序员大阳
05-25 6365
使用Vue框架，发现输入框`<input>`或者`<el-input>`的内容无法修改，也无法输入。
ElementUI el-input无法输入、修改、删除问题解决
热门推荐
weixin_52394141的博客
12-01 1万+
使用 el-input 这个标签时，我有些情况下在 el-input 是无法输入的，绑定的值动也动不了，删也删不掉，改也改不了，所以我做了以下的解决方法的统计，希望可以帮助到大家！造成的结果就是从后端传来的数据只能显示在输入框中，不能改也不能删，所以大家也可以考虑一下这个情况，当然表单的数据最好也不要使用this，虽然不知道原理，但是问题确实出在this上，知道的友友请在评论区分享哦~3.我们有些时候可能会忘记加入v-model属性，来绑定输入框中的值，如果忘记加入了，记得补上。
el-input新增后无法编辑的问题
Giraffe0615的博客
09-29 1480
el-input新增后无法编辑的问题
element-ui el-input无法更改内容，修改不生效
weixin_46972395的博客
07-21 4508
原因是vue页面进行数据渲染时，层次嵌套或者多重数据绑定导致该组件信息框数据不能被Vue实时监听到，以此出现了数据发生改变但页面上更新或删除对应信息框的数据毫无反应的现象，此时需要强制更新，重新渲染。...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
Bootstrap实现省市区三级联动(亲测可用)
10-16
主要为大家详细介绍了Bootstrap实现省市区三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ExtJS中设置下拉列表框不可编辑的方法
10-25
主要介绍了ExtJS中设置下拉列表框不可编辑的方法,需要的朋友可以参考下
【解决Vue中el-input输入框无法编辑的问题】
qq_45278500的博客
12-07 4416
解决Vue项目中el-input标签无法编辑的问题
Vue 中，禁止编辑的方法
coinisi_li的博客
07-04 1万+
3.使用计算属性或变量控制编辑状态：可以使用 Vue 的计算属性或数据变量来控制输入框的编辑状态。通过根据特定条件设置变量的值，可以动态地启用或禁用输入框的编辑。在 Vue 中，禁止编辑的方法：以禁止编辑输入框为例。可以与isView之类结合使用，配合展示。属性：与原生 HTML 类似，Vue 中的输入框组件也通常支持。或者，如果使用了 Element UI 的。，可以禁用输入框，并阻止用户进行编辑。属性：在 Vue 中，可以通过绑定。，即可实现禁止编辑的效果。属性来禁止编辑输入框。
实现输入框鼠标禁止编辑的三种方式
qq_53825610的博客
05-30 1574
3.css实现：pointer-events: none；//禁用鼠标事件 鼠标触碰时为正常的箭头显示。2.readonly属性：鼠标触碰时显示为编辑的状态。1.disbled属性：鼠标触碰时显示为禁用状态。
解决el-input 不能编辑输入问题
qq_49732089的博客
11-05 1692
在el-input标签中添加@input=“change($event)”： 去实现此change(e)方法，效果为强行刷新视图： change (e) { this.$forceUpdate() }, 详情见https://blog.csdn.net/weixin_45883730/article/details/108779686
vue中的el-input设置灰显不可编辑
dxjren的博客
11-17 8120
el-input设置灰显不可编辑，以及报：invalid prop: type checked failed for prop "disabled".Expected Boolean,got String with value "true"解决办法
vue.js element el-talbe 内嵌el-input 无法编辑，视图不刷新（更新）
04-05 4141
不知道为什么el-table里的el-talbe-column内嵌el-input后修改内容后会无法刷新出新内容，实际log看数据是更新了，不过就是试图不刷新 html代码 <el-table-column prop="totalAmount" label="换购价" width="150"> <template slot-scope="scope"> ...
ElementUI el-input 设置数据无法修改
最新发布
回忆在这里
02-28 1296
网上有一些方案，比如添加input、change之类的事件，调用强制更新this.$forceUpdate()，试过之后并没有解决问题，分析是因为本来el-input就已经是无法修改状态，input，change事件怎么触发呢？分析原因是在定义data数据初始化时候没有把原始的属性结构定义，AJAX返回结果后直接给form添加新的属性并赋值，虽然数据能显示，但是这样添加的属性不是响应式的，如果在模板或渲染函数中使用该属性，这个新的属性将无法触发组件重新渲染。
vue中el-input赋值后不能编辑
weixin_44094836的博客
11-25 3525
接口数据给el-input赋值成功后不能编辑 原因：在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新 解决：this.$set(val1,val1.val2,val3) this.$set(this.convenForm, 'orPrice', this.convenForm.orPrice); 注：this.convenForm是对象，orPrice是对象里字段，最后一个是赋值 ...
elementUI如何设置input不可编辑
追求卓越583的博客
01-18 2739
elementUI如何设置input不可编辑
如何设置一个vue的前端界面的所有输入框el-input都不可选
05-31
要设置一个vue的前端界面的所有输入框el-input都不可选，可以使用CSS样式来实现。可以在全局CSS文件中设置以下样式： ```css .el-input input { pointer-events: none; } ``` 这会将所有`.el-input`类下的输入框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值