vxe-table新增行

vxe-table是一个基于Vue.js框架开发的工具箱，它为我们提供了完善的表格组件，可以实现各种复杂的表格操作，包括新增行。新增行是我们在处理表格数据的过程中经常需要进行的操作之一。在使用vxe-table进行新增行操作时，我们需要先为表格添加“编辑表格数据”的功能，然后在对应的事件中调用组件提供的API完成新增行操作。

首先，我们需要在vxe-table中启用可编辑模式，该模式会使表格的单元格变为可编辑的状态。要实现编辑模式，我们可以在定义表格的地方添加一些设置项，例如：

<template>
	<vxe-table :data="tableData" :edit-config="{ mode: 'row', showIcon: true }">
		<!-- 表头配置 -->
		<vxe-table-column type="seq" title="序号"></vxe-table-column>
		<vxe-table-column field="name" title="名称"></vxe-table-column>
		<vxe-table-column field="age" title="年龄"></vxe-table-column>
		<vxe-table-column field="address" title="地址"></vxe-table-column>
	</vxe-table>
</template>

在上述示例代码中，我们通过`edit-config`属性设置了表格的编辑模式为“行编辑”，并且添加了可编辑单元格的编辑图标。

接着，我们也可以定义一个按钮用于触发新增行操作，如下所示：

<template>
    <vxe-button @click="addRow">新增行</vxe-button>
</template>

<script>
export default {
    methods: {
        addRow () {
            this.$refs.table.addRow()
        }
    }
}
</script>

在上述示例代码中，我们定义了一个名为`addRow`的方法，该方法通过调用表格组件的`addRow()`方法来完成新增行操作。对应的，我们需要在表格组件中添加`ref`属性，并将其值设置为`table`：

<template>
    <vxe-table ref="table" :data="tableData" :edit-config="{ mode: 'row', showIcon: true }">
        <!-- 表头配置 -->
        <vxe-table-column type="seq" title="序号"></vxe-table-column>
        <vxe-table-column field="name" title="名称"></vxe-table-column>
        <vxe-table-column field="age" title="年龄"></vxe-table-column>
        <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
</template>

最后，我们就可以通过点击“新增行”按钮，在表格中添加一行新数据了。值得注意的是，新增行操作不会实时保存到数据源中，需要使用者自行实现保存操作。