image.png
问题:
在输入框输入东西的时候出现1-2s延迟渲染
代码:
<el-table-column slot="remarks" min-width="130" align="left" label="备注">
<template v-slot="{row}">
<el-input v-model.lazy="row.remarks" type="textarea" :rows="3" clearable size="mini" style="padding:0 3px;" @blur="saveRemarks(row.id,row.remarks)" />
</template>
</el-table-column>
解决方案:
用原生textarea代替el-input
<el-table-column slot="remarks" min-width="130" align="left" label="备注">
<template v-slot="{row,$index}">
<textarea
:value="row.remarks"
:rows="3"
class="border p-0"
style="width: calc(100% - 2px);color:#606266 !important;"
@blur="saveRemarks($event,row,$index)"
/>
</template>
</el-table-column>
saveRemarks(event, row, index) { // 保存备注
const val = event.target.value.trim()
if (val === row.remarks) return
row.remarks = val
saveRemarks({ id: row.id, remarks: row.remarks }).then(res => {
if (res.code === 200) {
this.$message.success('备注修改成功')
}
})
}