目前有一个需求，新增一行可编辑的表格内容

示例.png

代码如下：
1.定义数据内容

interface TableDataItem {
    address: string;
    num: string;
}
const tableData = ref<TableDataItem[]>([]);

2.设计动态表格

<el-row :gutter="24">
                        <el-button type="primary" @click="addRow">添加</el-button>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column label="地点" width="350">
                                <template #default="{ row }">
                                    <el-input v-model="row.address" placeholder="请输入地点"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="数量" width="180">
                                <template #default="{ row }">
                                    <el-input v-model="row.num" placeholder="请输入数量"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="{ $index }">
                                    <el-button type="danger" icon="el-icon-delete" @click="removeRow($index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>

3.新增表格行

function addRow() {
    tableData.value.push({
        address: '',
        num: '',
    });
}

4.删除表格行

function removeRow(index: number) {
    tableData.value.splice(index, 1);
}

5.思路整理
整体设计思路是将动态表格设计为一个空的数组，新增一行实际上就是push一个数组进去，删除就是根据索引删除对应的数组