SOURCE

const tableData = [
    {
        "id": "630000199712037863",
        "name": "龚丽",
        "sex": "男",
        "age": "27"
    },
    {
        "id": "210000201308094251",
        "name": "胡磊",
        "sex": "女",
        "age": "23"
    },
    {
        "id": "130000197105297834",
        "name": "梁涛",
        "sex": "男",
        "age": "25"
    },
    {
        "id": "820000199612150135",
        "name": "汤磊",
        "sex": "女",
        "age": "22"
    },
    {
        "id": "62000019890910383X",
        "name": "锺霞",
        "sex": "男",
        "age": "32"
    },
    {
        "id": "220000198308285899",
        "name": "汪静",
        "sex": "女",
        "age": "36"
    },
    {
        "id": "500000201207157638",
        "name": "黄洋",
        "sex": "女",
        "age": "34"
    },
    {
        "id": "210000200104251636",
        "name": "史敏",
        "sex": "女",
        "age": "23"
    },
    {
        "id": "520000199702187221",
        "name": "秦杰",
        "sex": "男",
        "age": "27"
    },
    {
        "id": "360000201310213128",
        "name": "高娜",
        "sex": "女",
        "age": "24"
    },
    {
        "id": "140000198010251864",
        "name": "林勇",
        "sex": "男",
        "age": "23"
    },
    {
        "id": "410000201705071501",
        "name": "孔静",
        "sex": "女",
        "age": "34"
    },
    {
        "id": "120000198303070668",
        "name": "杨芳",
        "sex": "男",
        "age": "33"
    },
    {
        "id": "31000020210831780X",
        "name": "范杰",
        "sex": "男",
        "age": "37"
    },
    {
        "id": "53000020210802336X",
        "name": "常勇",
        "sex": "女",
        "age": "34"
    },
    {
        "id": "410000200309046836",
        "name": "尹秀兰",
        "sex": "女",
        "age": "31"
    }
]

var Main = {
    data() {
        return {
            table: {
                loading: false,
                data: [],
                rules: {
                    name: [
                        { required: true, message: "姓名不允许为空" },
                    ],
                    sex: [
                        { required: true, message: "性别不允许为空!" }
                    ]
                }
            },
            page: {
                pageNo: 1,
                pageSize: 5,
                total: 0
            },
            // 标记当前编辑行的操作模式, insert-新增, update-更新
            editMode: null
        }
    },
    methods: {
        // 表格数据查询
        queryTableData() {
            this.page.pageNo = 1;

            this.reloadTableData();
        },
        // 分页切换事件
        handlePageChange({ currentPage, pageSize }) {
            if (this.page.pageSize === pageSize) {
                this.page.pageNo = currentPage;
            } else {
                // 分页大小变化, 从第一页开始查询
                this.page.pageNo = 1;
                this.page.pageSize = pageSize;
            }

            this.reloadTableData();
        },
        reloadTableData() {
            this.table.loading = true;
            this.editMode = null;
            this.listApi(this.page).then(result => {
                this.table.loading = false;

                this.table.data = result.data;
                this.page.total = result.total;
            });
        },
        async addRow() {
            const editData = this.$refs.dataTable.getEditRecord();
            if (editData !== null) {
                VXETable.modal.message({ content: '请先保存当前编辑的数据!', status: 'error' });
                return;
            }

            // 在顶部新增
            const { row: newRow } = await this.$refs.dataTable.insertAt({});
            // // 在底部新增
            // const { row : newRow } = await this.$refs.dataTable.insertAt({}, -1);
            this.$refs.dataTable.setEditRow(newRow);
            this.editMode = "insert";
        },
        editRow(row) {
            const editData = this.$refs.dataTable.getEditRecord();
            if (editData !== null) {
                VXETable.modal.message({ content: '请先保存当前编辑的数据!', status: 'error' });
                return;
            }

            this.$refs.dataTable.setEditRow(row);
            this.editMode = "update";
        },
        delRow(row) {
            this.deleteApi(row).then(result => {
                // 如果不分页可以使用这种方式
                // this.$refs.dataTable.remove(row);

                // 重新查询表格数据
                this.queryTableData();
            });
        },
        async saveRow(row) {
            const errMap = await this.$refs.dataTable.validate().catch(errMap => errMap)

            if (errMap) {
                VXETable.modal.message({ content: '您输入的数据有误, 请核对后重试!', status: 'error' });
                return;
            }

            if (this.editMode === "insert") {
                this.insertApi(row).then(result => {
                    this.$refs.dataTable.clearEdit();

                    // 重新加载表格数据
                    this.reloadTableData();
                });
            } else if (this.editMode === "update") {
                this.updateApi(row).then(result => {
                    this.$refs.dataTable.clearEdit();

                    // 重新加载表格数据
                    this.reloadTableData();
                })
            }
        },

        // 模拟Axios API接口请求
        listApi(params) {
            const { pageNo, pageSize } = params;
            return new Promise((resolve) => {
                setTimeout(() => {
                    let start = (pageNo - 1) * pageSize;
                    let end = Math.min(pageNo * pageSize, tableData.length);

                    resolve({
                        code: "200",
                        data: tableData.slice(start, end),
                        total: tableData.length
                    });
                }, 300);
            });
        },
        insertApi(row) {
            return new Promise((resolve) => {
                row.id = Date.now();
                tableData.unshift(row);

                resolve({
                    code: "200"
                });
            });
        },
        updateApi(row) {
            return new Promise((resolve) => {
                let dataIndex = -1;
                for (let index = 0; index < tableData.length; index++) {
                    if (tableData[index].id === row.id) {
                        dataIndex = index;
                        break;
                    }
                }

                for (let key in row) {
                    tableData[dataIndex][key] = row[key];
                }

                resolve({
                    code: "200"
                });
            });
        },
        deleteApi(row) {
            return new Promise((resolve) => {
                let dataIndex = -1;
                for (let index = 0; index < tableData.length; index++) {
                    if (tableData[index].id === row.id) {
                        dataIndex = index;
                        break;
                    }
                }

                tableData.splice(dataIndex, 1);

                resolve({
                    code: "200"
                });
            });
        }
    },
    computed: {
        // 判断当前行是否在编辑状态
        isEditing() {
            return (row) => {
                return this.$refs.dataTable ? this.$refs.dataTable.isEditByRow(row) : false;
            }
        }
    },
    mounted() {
        this.reloadTableData();
    }
};

var app = new Vue(Main).$mount('#app')

<script src="https://unpkg.com/vue@2.6.0">

</script>
<script src="https://unpkg.com/xe-utils">

</script>
<script src="https://unpkg.com/vxe-table@3">

</script>

<div id="app">
	<template>
		<div>
			<h2>VXETable增删改查示例(Promise模拟Axios请求演示)</h2>
			<vxe-button status="primary" @click="addRow">新增</vxe-button>
			<vxe-button status="primary" @click="queryTableData">查询</vxe-button>
			<br>
            <br>
			<vxe-table 
                ref="dataTable" 
                :loading="table.loading"
                :data="table.data" 
                :edit-rules="table.rules"
                keep-source 
                :edit-config="{mode: 'row', trigger: 'manual', showStatus: true, autoClear: false}"
            >
                <vxe-column type="seq" width="50" align="center"></vxe-column>
                <vxe-column field="name" title="姓名" :edit-render="{}">
					<template #edit="{ row }">
                        <vxe-input v-model="row.name" placeholder="请输入"></vxe-input>
					</template>
				</vxe-column>
				<vxe-column field="sex" title="性别" :edit-render="{}">
					<template #edit="{ row }">
                        <vxe-input v-model="row.sex" placeholder="请输入"></vxe-input>
					</template>
                </vxe-column>
				<vxe-column field="age" title="年龄" :edit-render="{}">
					<template #edit="{ row }">
                        <vxe-input v-model="row.age" type="number" placeholder="请输入"></vxe-input>
					</template>
                </vxe-column>
                <vxe-column title="操作" width="120" align="center">
                    <template #default="{ row }">
                        <template v-if="isEditing(row)">
                        <vxe-button type="text" status="primary" @click="saveRow(row)">保存</vxe-button>
                        </template>
                        <template v-else>
                            <vxe-button type="text" status="primary" @click="editRow(row)">编辑</vxe-button>
                            <vxe-button type="text" status="danger" @click="delRow(row)">删除</vxe-button>
                        </template>
                    </template>
                </vxe-column>
			</vxe-table>

            <vxe-pager 
                :current-page="page.pageNo" 
                :page-size="page.pageSize" 
                :total="page.total" 
                @page-change="handlePageChange"
            ></vxe-pager>
		</div>
	</template>
</div>

@import url("https://unpkg.com/vxe-table/lib/style.css");