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>
相关推荐
糯米团子7494 小时前
javascript高频知识点
开发语言·前端·javascript
无风听海4 小时前
Bearer Token 权威指南:从原理到生产级安全实践
前端·javascript·安全
riuphan4 小时前
JavaScript 类型判断完全指南
前端·javascript
Hilaku4 小时前
前端工程师最终会变成 AI工程师?
前端·javascript·程序员
flyinmind5 小时前
Java环境与Android环境中使用QuickJS
java·开发语言·javascript·quickjs
如烟花的信页5 小时前
数美滑块逆向分析
javascript·爬虫·python·js逆向
子琦啊5 小时前
华为 OD 2026年5月笔试题解析
javascript·华为
无风听海5 小时前
Promise 与 Async Await 深度解析
前端·javascript
lpd_lt5 小时前
服务端类vue等页面AI测试方向
前端·vue.js·人工智能
橘子味的冰淇淋~6 小时前
优化前端性能之从“全局引入”改为“按需引入”
前端·javascript·vue.js