前端实现拉新——table增删改查

背景：

避免每次新增、编辑、删除时频繁调用后台接口

部分实例：

<template>
    <div>
        <el-button round type="primary" @click="add">
            新建
        </el-button>
        <el-table id="writeFeatureManageTable" :data="tableDataPage" border style="margin:10px 0">
            <!-- 自定义或遍历 -->
            <el-table-column label="英文名" align="center" prop="ename" />
            <slot name="showClass" />
            <el-table-column label="操作" fixed="right" align="center" width="150">
                <template slot-scope="scoped">
                    <el-button round id="kp_but_1502" type="primary" @click="edit((pageNum-1)*pageSize+scoped.$index)" size="mini">
                        编辑
                    </el-button>
                    <el-button round plain id="kp_but_879" type="danger" @click="del((pageNum-1)*pageSize+scoped.$index)" size="mini">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加分页 -->
        <pagination style="margin-top:10px" :page-sizes="pageSizes" :table-begin="tableData" @table-pagination-change="tablePaginationChange" />
        <el-dialog :title="title" width="30%" :visible.sync="dialogVisible"
         :close-on-click-modal="false" @open="open" :append-to-body="true">
            <el-form label-position="top" id="writeFeatureManageForm" :model="form" size="mini" label-width="130px" :rules="rules"
             ref="form">
                <el-form-item label="英文名" prop="ename">
                    <el-input placeholder="请输入英文名" id="kp_input_8124" v-model="form.ename" />
                </el-form-item>
            </el-form>
            <span slot="footer" id="feature_manage_btn">
                <el-button round id="kp_but_3823" @click="dialogVisible=false">取消</el-button>
                <el-button round id="feature_manage_commit" type="primary" size="mini" @click="commit" :disabled="!dialogVisible">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import pagination from "module-comp/tablePagination";
    export default {
        components: {
            pagination
        },
        data() {
            const pageSizes = [10, 20, 30]
            return {
                tableDataPage: [],
                pageSizes: pageSizes,
                pageNum: 1,
                pageSize: pageSizes[0],
                form: {
                    id: null,
                    cname: "",
                    ename: "",
                    featureClass: null
                },
                rules: {
                    featureClass: {
                        required: true,
                        message: "不能为空",
                        trigger: "blur"
                    }
                },
                currentIndex: null,
                type: "add",
                title: "新增",
                dialogVisible: false
            };
        },
        props: {
            tableData: {
                type: Array,
                default () {
                    return [];
                }
            },
            tableColumn: {
                type: Array,
                default () {
                    return [];
                }
            }
        },
        methods: {
            // 分页
            tablePaginationChange(data, pageNum, pageSize) {
                this.tableDataPage = data || []
                this.pageNum = pageNum
                this.pageSize = pageSize
            },
            // 打开对话框：清除校验
            open() {
                this.$nextTick(() => {
                    this.$refs.form.clearValidate();
                });
            },
            // 编辑当前下标
            edit(index) {
                this.currentIndex = index;
                this.dialogVisible = true;
                this.type = "edit";
                this.title = "修改";
                Object.assign(this.form, this.tableData[index]);//对象合并：form赋值
            },
            // 删除当前下标：无需判断新建/编辑，直接调用接口后前端删除
            del(index) {
                // this.currentIndex = index;
                this.tableData.splice(index, 1);
                this.$message.success("删除成功");
            },
            // 新增
            add() {
                this.currentIndex = this.tableData.length;
                this.dialogVisible = true;
                this.type = "add";
                this.title = "新增";
                const param = {
                    id: null,
                    cname: "",
                    ename: "",
                    featureClass: null
                };
                Object.assign(this.form, param);//表单赋值：this.form
            },
            // 提交
            commit() {
                if (this.type === "add") {
                    this.addFeatureType();
                } else {
                    this.editFeatureType();
                }
            },
            // 新增保存
            addFeatureType() {
                let obj = {};
                Object.assign(obj, this.form);//赋值新对象：obj
                this.tableData.push(obj);
                // this.$emit('initFeatureManage')
                this.$message.success("添加成功");
            },
            // 修改保存
            editFeatureType() {
                let obj = {};
                obj.id = this.form.id;
                obj.cname = this.form.cname;
                obj.ename = this.form.ename;
                this.tableData.splice(this.currentIndex, 1, obj);
                this.$message.success("修改成功");
            }
        }
    };
</script>

说明：分页和表格可自行封装，统一配置。