el-table列表修改某个输入框输入 卡顿问题修改

卡顿的代码:

复制代码
 <!-- <el-input
                     v-else
										v-model="table.data[$index].watermeterCode"
										:disabled="handleType === 'detail' || !row.isEdit"

									></el-input> -->修改

解决的办法:

复制代码
handleInput(index, field, value) {

      this.$set(this.table.data[index], field, value)
      // console.log(this.table.data[index])
    },
复制代码
<el-table-column
								label="水表编号"
								prop="watermeterCode"
								show-overflow-tooltip
								width="90"
							>
								<template v-slot:header>
									<span class="warn">*</span>
									<span>水表编号</span>
								</template>
								<template v-slot="{ row , $index}">

                   <span v-if="handleType === 'detail' || !row.isEdit">{{ row.watermeterCode }}</span>
              
                  <el-input
                      :key="row.id"
                      :ref="'nextNumInput-' + row.$index"
                      :controls="false"
                      :precision="0"
                      placeholder="请输入"
                      v-model="row.watermeterCode"
                       @blur="(event) => handleInput($index, 'watermeterCode', event.target.value)"
                    >
                    </el-input>
								</template>
							</el-table-column>
相关推荐
daols8838 分钟前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
触底反弹1 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6131 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
腻害兔3 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:字典、短信、邮件、通知——后台系统的“基础设施四件套“!
java·前端·vue.js·产品经理·ai编程
腻害兔4 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:支付模块 yudao-module-pay,一个让产品经理都看懂的支付中台设计
java·前端·vue.js·产品经理·ai编程
张元清5 小时前
React useResizeObserver Hook:追踪元素尺寸变化(2026)
javascript·react.js
瑞瑞小同学8 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
像我这样帅的人丶你还9 小时前
MCP + npm:给五年前的老系统接上AI
前端·javascript·agent
Larcher9 小时前
LangChain RAG 排错实录:.env 为什么没有生效
vue.js·后端
一个写前端的10 小时前
基于 Vue 3 的大文件分片上传组件,支持断点续传、并发上传、失败重试等功能
前端·javascript·vue.js