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

在这里插入图片描述

            <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: ''},}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/284263.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python3中_和__的用途和区别

Python3中_和__的用途和区别

目录 一、_&#xff08;下划线&#xff09; 1、临时变量&#xff1a; 2、未使用的变量&#xff1a; 二、__&#xff08;双下划线&#xff09; 1、私有属性&#xff1a; 2、私有方法&#xff1a; 三、__的一些特殊用途。 总结 Python3中的_和__是两个特殊的标识符&#…
阅读更多...
羊大师讲解，羊奶中的干物质

羊大师讲解，羊奶中的干物质

羊大师讲解&#xff0c;羊奶中的干物质 羊奶作为一种营养价值极高的乳制品&#xff0c;其中的干物质含量是其重要组成成分之一。干物质是指在牛奶中除去水分后剩余的成分&#xff0c;包括蛋白质、脂肪、乳糖、矿物质和维生素等。这些干物质不仅赋予了羊奶独特的口感和营养价值…
阅读更多...
1U、2U、4U和42U服务器，看完秒懂！

1U、2U、4U和42U服务器，看完秒懂！

晚上好&#xff0c;我的网工朋友。 服务器是一个很广泛的概念&#xff0c;涵盖了各种类型和规格的计算机&#xff0c;用于提供各种网络和数据服务。 而机架服务器是当前数据中心和专业计算环境中&#xff0c;使用最为广泛的服务器类型之一。 机架式服务器的外形看来不像计算…
阅读更多...
Spring Cloud Alibaba核心技术宝典，分布式系统中间件实战案例(百度云下载)

Spring Cloud Alibaba核心技术宝典，分布式系统中间件实战案例(百度云下载)

前言 《Spring Cloud Alibaba学习笔记》其实是阿里的微服务解决方案&#xff0c;是阿里巴巴结合自身微服务实践,开源的微服务全家桶&#xff0c;在Spring Cloud项目中孵化成为Spring Cloud的子项目。第一代的Spring Cloud标准中很多组件已经停更,如&#xff1a;Eureak,zuul等。…
阅读更多...
05-Autoscaling

05-Autoscaling

1 Knative的自动缩放机制 “请求驱动计算”是serverless的核心特性 缩容至0&#xff1a;即没有请求时&#xff0c;系统不会分配资源给Kservice&#xff1b;从0开始扩容&#xff1a;由Activator缓存请求&#xff0c;并报告指标数据给Autoscaler&#xff1b;按需扩容&#xff1a;…
阅读更多...
说一下 jvm 有哪些垃圾回收算法？

说一下 jvm 有哪些垃圾回收算法？

说一下 jvm 有哪些垃圾回收算法&#xff1f; 一.对象是否已死算法 1.引用计数器算法 2.可达性分析算法 二.GC算法 1.标记清除算法 如果对象被标记后进行清除&#xff0c;会带来一个新的问题–内存碎片化。如果下次有比较大的对象实例需要在堆上分配较大的内存空间时&#xff0…
阅读更多...
【Axure高保真原型】3D商品销售可视化模板

【Axure高保真原型】3D商品销售可视化模板

今天和大家分享3D商品销售大屏可视化的原型模板&#xff0c;里面包括常用的3D条形图、3D柱状图、3D饼图、3D环形图、3D金字塔图&#xff0c;鼠标移入图表&#xff0c;对应区域会高亮变色&#xff0c;并且显示对应的数据标签&#xff0c;鼠标移入地图标点后&#xff0c;可以显示…
阅读更多...
2023 OADC：开放原子云社区正式启航，Curve、Kyuubi获奖

2023 OADC：开放原子云社区正式启航，Curve、Kyuubi获奖

12月16-17日&#xff0c;2023开放原子开发者大会&#xff08;OADC&#xff09;在江苏省无锡市召开。大会首日&#xff0c;由网易数帆联合发起的“开放原子云社区”宣告成立&#xff0c;随后网易数帆资深云原生专家侯诗军分享了稳定性保障的前沿实践&#xff0c;Curve、Apache K…
阅读更多...
每天五分钟计算机视觉：网络中的网络(NiN)

每天五分钟计算机视觉：网络中的网络(NiN)

本文重点 前面的课程中我们学习了众多的经典网络模型&#xff0c;比如LeNet、AlexNet、VGG等等&#xff0c;这些网络模型都有共同的特点。 它们的特点是&#xff1a;先由卷积层构成的模块充分提取空间特征&#xff0c;然后再由全连接层构成的模块来输出分类结果。也就是说它们…
阅读更多...
【RTOS学习】源码分析(通用队列 队列 队列集)

【RTOS学习】源码分析(通用队列 队列 队列集)

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 前面本喵讲解了和任务相关的FreeRTOS源码&#xff0c;进行再来介绍一下用于任务间通信的几种数据结…
阅读更多...
开发新功能，在idea中创建新分支

开发新功能，在idea中创建新分支

开发新功能&#xff0c;在idea中新建自己的分支&#xff0c;要在dev分支上创建&#xff0c;步骤如下&#xff1a; 1、idea右下角可以看见当前在dev分支上 2、点击dev&#xff0c;接着点击New Branch 输入分支名 创建后&#xff0c;在Local Branches中就有了 此时可以看到已经切…
阅读更多...
漏洞复现-某友CRM系统某接口存在任意文件读取（附漏洞检测脚本）

漏洞复现-某友CRM系统某接口存在任意文件读取（附漏洞检测脚本）

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023