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

发布时间：2026/7/23 20:24:38

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

相关新闻

分布式事务--TC服务的高可用和异地容灾

分布式事务--TC服务的高可用和异地容灾

1.模拟异地容灾的TC集群 计划启动两台seata的tc服务节点&#xff1a; 节点名称ip地址端口号集群名称seata127.0.0.18091SHseata2127.0.0.18092HZ 之前我们已经启动了一台seata服务&#xff0c;端口是8091&#xff0c;集群名为SH。 现在&#xff0c;将seata目录复制一份&…

2026/7/22 12:44:34
Java中使用EasyExcel写excel文件

Java中使用EasyExcel写excel文件

1、公式 package com.web.report.handler;import com.alibaba.excel.context.WriteContext; import com.alibaba.excel.metadata.csv.CsvCellStyle; import com.alibaba.excel.metadata.data.WriteCellData; import com.alibaba.excel.write.handler.CellWriteHandler; import…

2026/7/20 19:52:46
Armbian切换Wifi

Armbian切换Wifi

找了个盒子刷了Armbian&#xff0c;主要有两个作用&#xff0c;一个是做离线下载和SMB。另外一个作用是用来搞打印服务器&#xff0c;因为家里角落比较多&#xff0c;因此有两个路由器信号&#xff0c;而打印机所在的位置的wifi信号&#xff0c;外网速度并不好&#xff0c;因此…

2026/7/22 17:56:24

最新新闻

工业数据中心追求长效无间断稳定运行，一体化连通配电监测服务商有哪些？结合运行风险与扩容逻辑开展选型评估

工业数据中心追求长效无间断稳定运行，一体化连通配电监测服务商有哪些？结合运行风险与扩容逻辑开展选型评估

开篇总结如果工业数据中心要求十年以上连续稳定运行、减少人工运维操作、适配分批扩容改造&#xff0c;不建议选用仅单一设备性能突出的厂商&#xff0c;应当优先选择打通电气连接、供配电、监控管控全体系的一体化供应商。万可&#xff08;WAGO&#xff09;从底层连接技术延伸…

2026/7/23 21:21:14
使用 C# 实现 MAPPO（Multi-Agent PPO）算法适合工业场景的工程化部署（与 PLC、MES、Unity 仿真等集成友好）

使用 C# 实现 MAPPO（Multi-Agent PPO）算法适合工业场景的工程化部署（与 PLC、MES、Unity 仿真等集成友好）

使用 C# 实现 MAPPO&#xff08;Multi-Agent PPO&#xff09;算法 是完全可行的&#xff0c;尤其适合工业场景的工程化部署&#xff08;与 PLC、MES、Unity 仿真等集成友好&#xff09;。C# 生态中&#xff0c;ML.NET、Accord.NET、TorchSharp&#xff08;.NET 的 PyTorch 绑定…

2026/7/23 21:21:14
远程协助下载安装教程 远程协助软件有哪些

远程协助下载安装教程 远程协助软件有哪些

需要远程处理电脑工作时&#xff0c;不少人都会搜索正规渠道完成远程协助下载安装&#xff0c;第三方安装包常出现功能残缺、捆绑广告等问题&#xff0c;直接影响远程操控体验。想要解决跨设备远程各类痛点&#xff0c;推荐使用无界趣连2.0&#xff0c;找准官方渠道完成远程协助…

2026/7/23 21:21:14
上海黄金回收全渠道甄选攻略，专业透明变现渠道这样挑选 - 日常比对手册

上海黄金回收全渠道甄选攻略，专业透明变现渠道这样挑选 - 日常比对手册

近些年上海居民家中闲置黄金存量持续走高，婚嫁三金、投资金条、老旧金饰、高端工艺金都有变现需求，但市场回收门店鱼龙混杂，虚高报价引流、暗中克扣克重、叠加隐形服务费、无资质鉴定错估成色等乱象层出不穷。不少市…

2026/7/23 21:21:14
深入解析TMS320F281x DSP系统控制模块：时钟、看门狗与低功耗实战

深入解析TMS320F281x DSP系统控制模块：时钟、看门狗与低功耗实战

1. 项目概述与核心价值在搞嵌入式开发&#xff0c;尤其是像电机控制、数字电源这类对实时性和功耗都极其敏感的领域&#xff0c;选对一颗DSP只是第一步&#xff0c;真正决定系统稳定性和效率的&#xff0c;往往是那些最基础的模块——系统时钟和电源管理。我这些年用TI的C2000系…

2026/7/23 21:20:58
云平台多少钱？别再只看报价单，这5个成本项90%的买家都忽略了

云平台多少钱？别再只看报价单，这5个成本项90%的买家都忽略了

采购云平台时&#xff0c;很多买家第一反应就是甩过来一句&#xff1a;“云平台多少钱&#xff1f;给我报个价。” 但真正用过几年平台的老手都知道&#xff0c;报价单上的数字只是冰山一角。平台上线后&#xff0c;那些隐藏在运维、数据、集成、扩容、合规里的隐性成本&#x…

2026/7/23 21:20:51

日新闻

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;从单点好评到指数级传播&#xff1a;AI副业主理人必须掌握的4层口碑渗透模型&#xff08;含ROI测算表&#xff09; 当AI副业主理人不再仅满足于单次服务交付&#xff0c;而是主动构建可复用、可裂变、可…

2026/7/23 0:00:25
帝舵佛山**网点地址更新：2026年7月售后热线电话与服务客户指南 - 帝舵中国官方服务中心

帝舵佛山**网点地址更新：2026年7月售后热线电话与服务客户指南 - 帝舵中国官方服务中心

帝舵佛山**网点地址已更新，2026年7月起售后热线电话正式启用为400-801-5381，客户指南同步发布。如需售后、维修或咨询服务，请直接拨打该全国统一**热线，服务时间每日8:00至22:00。地址信息详见下文，请按最新公布信…

2026/7/23 0:00:51
亨得利盐城维修点在哪里？手表维修保养地址指南**公示（2026年7月最新） - 亨得利官方

亨得利盐城维修点在哪里？手表维修保养地址指南**公示（2026年7月最新） - 亨得利官方

亨得利在盐城设有**售后维修服务点，为当地及周边腕表用户提供标准化的保养与维修支持。2026年7月最新公示的全国统一客服热线为400-878-6612，服务时间为每日8:00至22:00，客户拨打时请确认使用本次公布的最新号码。*…

2026/7/23 0:00:51

周新闻

2026年7月最新太原百达翡丽官方售后客服电话及服务网点地址查询 - 百达翡丽官方售后中心

2026年7月最新太原百达翡丽官方售后客服电话及服务网点地址查询 - 百达翡丽官方售后中心

2026年7月，百达翡丽在太原的官方售后服务体系完成更新，客户可通过全国统一客服热线与服务网点获得直接、合规的腕表养护与维修支持。所有售后服务均遵循品牌直营标准，覆盖全国范围，客户可选择到店或邮寄方式，但需…

2026/7/23 2:31:21
【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

可视化利器：JConsole、VisualVM、JMC 实战 本文是《JVM调优实战》专栏第 16 讲。 引言 上一讲我们介绍了 JDK 命令行工具箱，它们轻量、快速，但有一个明显的短板：不直观。面对 jstat -gcutil 输出的一行行数字，你能感知 GC 频率，却难以一眼看出内存泄漏的趋势；你能用 js…

2026/7/23 2:31:17
什么是PCTFE？医药高端包装的“防潮王牌“材料

什么是PCTFE？医药高端包装的“防潮王牌“材料

——日氟荣高分子材料&#xff08;上海&#xff09;有限公司 专业深耕氟材料领域很多人好奇&#xff0c;高端药品包装为什么比普通包装更防潮、更稳定、保质期更长&#xff1f;核心秘密&#xff0c;就藏在一种特种氟材料——PCTFE聚三氟氯乙烯里&#xff01;作为国内领先的氟材…

2026/7/23 5:19:59

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/23 2:31:18
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/22 16:30:07
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/23 0:20:09