`formData.value = { ...row };` 这行代码通常出现在使用 Vue 3 组合式 API 的项目中，并且 `formData` 大概率是一个 `ref` 对象。下面详细介绍这行代码的含义和作用。 #### 代码含义 - `formData`：是一个使用 `ref` 创建的响应式引用对象。在 Vue 3 的组合式 API 里，`ref` 用于创建一个可变的响应式数据引用，可通过 `formData.value` 来访问和修改其内部的值。 - `{ ...row }`：这是 JavaScript 的展开语法（Spread syntax）。`row` 一般是一个对象，使用展开语法可以把 `row` 对象的所有可枚举属性展开到一个新对象里。这意味着会创建一个新对象，该对象包含了 `row` 对象的所有属性和值。 - `formData.value = { ...row };`：把使用展开语法创建的新对象赋值给 `formData` 的 `value` 属性。这样一来，`formData` 就拥有了 `row` 对象的所有属性和值。 #### 代码作用 这行代码的主要作用是把 `row` 对象的数据复制到 `formData` 里，而且是创建了一个新对象，并非直接引用 `row` 对象。这在很多场景下都很有用，例如： - **表单数据初始化**：当需要用表格某一行的数据来初始化表单时，可把这一行的数据复制到表单数据对象 `formData` 中。 - **数据隔离**：创建一个新对象来存储数据，避免直接修改原始数据 `row`。这样在修改 `formData` 时，不会影响到原始的 `row` 对象。 #### 代码示例 ```vue <template> <div> <el-table :data="tableData"> <el-table-column label="Name" prop="name"></el-table-column> <el-table-column label="Age" prop="age"></el-table-column> <el-table-column label="操作"> <template #default="scope"> <el-button @click="editRow(scope.row)">编辑</el-button> </template> </el-table-column> </el-table> <el-form :model="formData"> <el-form-item label="Name"> <el-input v-model="formData.value.name"></el-input> </el-form-item> <el-form-item label="Age"> <el-input v-model="formData.value.age"></el-input> </el-form-item> </el-form> </div> </template> <script setup> import { ref } from 'vue'; const tableData = ref([ { name: 'John', age: 20 }, { name: 'Jane', age: 25 } ]); const formData = ref({}); const editRow = (row) => { formData.value = { ...row }; }; </script> ``` 在这个示例中，点击“编辑”按钮时，会调用 `editRow` 方法，把当前行的数据复制到 `formData` 里，从而初始化表单数据。