vue3在弹出窗表格动态添加/删除/编辑行

 页面代码

<template>
    <div class="layout-padding">
        <div class="layout-padding-view layout-padding-auto">
            <el-dialog title="添加" :model-value="dialog" width="800px" @close="dialog = false; dialogTableData = []" center>
                <div style="width:100%;height:100%" v-loading="dialogLoading" element-loading-text="拼命加载中"
                    element-loading-background="rgba(0, 0, 0, 0)">
                    <el-table :data="dialogTableData" style="width: 100%" height="400" :border="true"
                        :header-cell-style="{ backgroundColor: '#f5f7fa', fontWeight: 'bold', color: '#909399', }"
                        empty-text="暂无数据">
                        <el-table-column prop="id" label="aa">
                            <template #default="{ row }">
                                <el-input v-model="row.id" placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="bb">
                            <template #default="{ row }">
                                <el-input v-model="row.name" placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="cc">
                            <template #default="{ row }">
                                <el-input v-model="row.remark" placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="{ row, $index }">
                                <div style="width:100%;display: flex;justify-content: center;">
                                    <el-button @click="handleDel(row, $index)" type="danger" size="mini">
                                        删除
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <template #footer>
                    <el-button @click="initDialog()">刷新</el-button>
                    <el-button type="primary" @click="handleAdd()">添加</el-button>
                    <el-button type="success" @click="handleSave()">保存</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, onMounted, getCurrentInstance, toRefs, defineComponent, } from 'vue';

export default defineComponent({
    name: 'basicsInfoInfo',
    setup(props: any) {
        onMounted(async () => {
        });
        const { proxy }: any = getCurrentInstance();

        const data = reactive({
            dialog: true,
            dialogLoading: false,
            dialogTableData: [] as any[],
        });


        const initDialog = async () => {
            data.dialogTableData = []
        }

        const handleDel = async (row: any, index: number) => {
            data.dialogTableData.splice(index, 1);
        }

        const handleSave = async () => {
        }

        const handleAdd = () => {
            data.dialogTableData.push({
                id: '', // 标识
                name: '', // 名称
                remark: '' // 其它
            });
        };

        return { ...toRefs(data), handleDel, handleSave, handleAdd, initDialog };
    },
})
</script>
<style scoped lang='scss'></style>

效果展示