【背景】
在 Vue3 + ArcoDesign项目中，使用ArcoDesign-Table表格组件不请求接口，实现表格里某条数据的本地编辑功能。最后统一通过接口发送数据。

【步骤】

1. 在表格每条数据列后添加一个“编辑”按钮，点击该按钮弹出一个对话框，用于修改表格行的数据。

示例页面如下：

template主要示例代码如下（父组件）：

// <template>
<a-table :data="tableData" >
	<template #rules="{ record }">
	   	<a-button
		  type="text"
		  size="small"
		  @click="handleEdit(record.list)"
		>
		  编辑
		</a-button>
	 </template>
</a-table>

 // 子组件
<edit-fault
 // editFaultVisible.value控制子组件的显隐
 v-model:visible="editFaultVisible"
 // propsTableData.value用于往子组件内传递数据
 :props-table-data="propsTableData"
 // handle-ok用于接收子组件emit过来的数据
 @handle-ok="editHandleOk"
></edit-fault>

script主要示例代码如下（父组件）：

// <script setup lang="ts">
// 打开子组件弹框
const handleEdit = (data: array) => {
  propsTableData.value = data;
  editFaultVisible.value = true;
};

2. 在对话框中添加一个表单，用于输入修改后的数据，将修改后的数据更新到表格中，同时关闭对话框。

示例页面如下：

弹框主要示例代码如下（子组件）：

<a-modal
	v-model:visible="dialogVisible"
	title="编辑"
	width="auto"
	:mask-closable="false"
	unmount-on-close
	@ok="handleOk"
	@cancel="handleCancel"
>
    <a-table
      :data="renderData"
    >
    </a-table>
</a-modal>

// 接收父组件传来的值
const props = defineProps<{
  visible: boolean;
  propsTableData: any;
}>();
// 将接收到的值赋值，在弹框展示
renderData.value = props.propsTableData;
// 注册emits事件
const emits = defineEmits(['update:visible','handleOk']);
// 弹框内点击确定
const handleOk = () => {
  // 编辑结束后在弹框内点击确定按钮，将编辑后的数据renderData.value传给父组件
  emits('handleOk', renderData.value);
  // 关闭子组件的弹框
  dialogVisible.value = false;
};

3. 父组件拿到子组件通过emits传过来的值

示例代码如下：

// 接收子组件弹框编辑后传过来的数据
const editHandleOk = (list: any) => {
    // 在父组件table绑定的tableData值里通过indexOf找到子组件内编辑的这条数据首次出现的位置。
	const dataIndex = tableData.value.indexOf(list);
	// 将list替换数组tableDataCopy中索引为dataIndex的元素。它删除了原来的元素，然后将新值插入到该位置
	const tableDataCopy = [...tableData.value];
	tableDataCopy.splice(dataIndex, 1, ...list);
	// 重新给父组件赋值
    tableData.value = tableDataCopy;
};

4. 在父组件内点击保存时，将编辑后的数据统一发送接口进行更新

示例代码如下：

const submit = async () => {
	await editData(tableData.value)
}