Quasar表格q-input输入失焦问题及后端字段别名设置咨询

输入框失焦问题修复 #

输入框每次编辑后失焦，核心原因是组件重新渲染导致输入框被销毁重建，对应修复方案如下：

1. 设置稳定的row-key
   给q-table添加row-key属性，绑定数据中唯一不变的字段（比如id）：

<q-table :rows="yourData" row-key="id" ...>

这样Quasar能精准识别每一行的身份，不会因为name字段更新而重新渲染整行组件。

2. 修改字段而非替换对象
   更新name字段时，直接修改原对象的属性，不要替换整个对象：

// 正确做法：修改属性，保持对象引用不变
const updateName = (row, newValue) => {
  row.name = newValue
}

// 错误做法：替换对象会导致组件重新挂载
// const updateName = (row, newValue) => {
//   const newRow = {...row, name: newValue}
//   // 用newRow替换原数组中的row
// }

3. 给输入框绑定稳定key
   在插槽的q-input上绑定唯一key，确保输入框组件身份稳定：

<template v-slot:body-cell-name="props">
  <q-input
    :key="props.row.id"
    v-model="props.row.name"
    @input="updateName(props.row, $event)"
  />
</template>

后端对象字段设置别名 #

完全可以给后端返回的字段设置别名，常用方式有两种：

1. 数据转换（推荐）
   获取后端数据后，直接给每个对象添加别名字段，后续操作别名同时同步原字段：

// 假设后端返回的数组是rawData
const yourData = rawData.map(item => ({
  ...item,
  // 给name设置别名displayName
  displayName: item.name
}))

// 编辑时同步原name字段，方便提交后端
const updateDisplayName = (row, newValue) => {
  row.displayName = newValue
  row.name = newValue
}

之后在q-table的columns配置中，把field设为displayName，插槽也对应使用这个别名即可。

2. 利用Vue计算属性
   通过计算属性包装后端数据，自动生成别名：

computed: {
  formattedData() {
    return this.rawData.map(item => ({
      ...item,
      aliasName: item.name
    }))
  }
}

注意：如果要修改数据，需要操作原rawData中的对象，计算属性会自动同步更新。

内容的提问来源于stack exchange，提问作者asfarasiknow