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('备注修改成功')
        }
      })
    }