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>
相关推荐
深念Y2 小时前
一个Bug:Vue Router 4.3.0 导致浏览器窗口无法最小化
前端·vue.js·bug·窗口·最小化·bilibili·视频网站
湛海不过深蓝2 小时前
【procomponents】根据表单查询表格数据的两种写法
前端·javascript·react.js
Beth_Chan2 小时前
Stock Trading - React
javascript·react.js
局i2 小时前
从零封装第一个 Vue 组件:极简入门指南
前端·javascript·vue.js
Jave21082 小时前
Vue下一个大版本会是怎样?它的最终目标是怎样的?
前端·vue.js·经验分享
JamesYoung79712 小时前
第三部分 — 服务工作者(后台)chrome.runtime 是什么(在 MV3 的说法中)
前端·javascript·chrome
夫琅禾费米线2 小时前
React Hook Form + Zod:优雅构建 React 表单
前端·javascript·react.js·typescript