Table表格组件不请求接口，实现表格里某条数据的本地编辑功能（Vue3+ArcoDesign）

本文主要是介绍Table表格组件不请求接口，实现表格里某条数据的本地编辑功能（Vue3+ArcoDesign），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

【步骤】

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

示例页面如下：

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

// <template>
<a-table :data="tableData" ><template #rules="{ record }"><a-buttontype="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-modalv-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)
}

这篇关于Table表格组件不请求接口，实现表格里某条数据的本地编辑功能（Vue3+ArcoDesign）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---