Vue3中AgGrid单元格响应式实现：避免重置与焦点丢失

核心思路 #

利用Vue3的响应式特性，让AgGrid绑定的rowData本身成为Vue响应式对象，自定义输入单元格组件时直接绑定响应式属性，避开AgGrid自带的setDataValue/setData等会触发重渲染的API，实现单元格联动的同时保留输入框焦点。

具体实现步骤 #

1. 确保rowData是Vue响应式对象
   初始化行数据时用ref或reactive包裹，让Vue能追踪数据变化：

   import { ref } from 'vue'
   
   const rowData = ref([
     { firstName: '', lastName: '', fullName: '' },
     // 更多行数据...
   ])
   

2. 自定义响应式输入单元格组件
   组件内部直接绑定行数据的属性，通过计算属性实现双向绑定，同时在输入时联动更新目标字段：

   <template>
     <input
       v-model="currentFieldValue"
       @input="syncLinkedField"
     />
   </template>
   
   <script setup>
   import { computed } from 'vue'
   
   const props = defineProps({
     params: {
       type: Object,
       required: true
     }
   })
   
   // 双向绑定当前单元格对应的数据字段
   const currentFieldValue = computed({
     get() {
       return props.params.data[props.params.colDef.field]
     },
     set(val) {
       props.params.data[props.params.colDef.field] = val
     }
   })
   
   // 联动更新关联字段（比如拼接姓名）
   const syncLinkedField = () => {
     const { firstName, lastName } = props.params.data
     props.params.data.fullName = `${firstName || ''} ${lastName || ''}`.trim()
   }
   </script>
   

3. 配置AgGrid列并注册自定义组件
   在AgGrid的列定义中指定自定义单元格渲染器，同时将组件注册到表格：

   const columnDefs = [
     { field: 'firstName', cellRenderer: 'CustomInput' },
     { field: 'lastName', cellRenderer: 'CustomInput' },
     { field: 'fullName', cellRenderer: 'CustomInput' }
   ]
   
   // 在AgGrid组件中注册自定义组件
   const frameworkComponents = {
     CustomInput: CustomInputComponent
   }
   

关键说明 #

• 为什么直接修改props.params.data之前无效？
  因为最初的rowData不是Vue响应式对象，修改后Vue无法追踪变化，AgGrid也无法感知到数据更新。只要确保rowData从一开始就是响应式的，直接修改属性就能触发同步。
• 为什么不用AgGrid的API？
  setDataValue/setRowData等方法会触发AgGrid的行/表重渲染机制，导致输入框丢失焦点；而直接操作Vue响应式对象，AgGrid会通过Vue的响应式更新感知到数据变化，仅更新对应单元格的内容，不会触发整行重渲染。

双向同步保障 #

由于rowData是响应式对象，表格内部修改后，外部直接访问rowData.value即可获取最新数据；外部修改rowData时，表格也会自动同步更新，无需额外处理。

内容的提问来源于stack exchange，提问作者adi-rosa