目前有一个需求，新增一行可编辑的表格内容
示例.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一个数组进去，删除就是根据索引删除对应的数组
