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

背景：

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

部分实例：

<template>
    <div>
        <el-button round type="primary" @click="add">
            新建
        </el-button>

    <el-input

      v-model="searchValue"

      placeholder="关键字搜索"

      style="width:250px;margin-bottom:10px;"

      clearable

      @clear="searchKwd"

    >

      <el-button

        round

        slot="append"

        icon="el-icon-search"

        @click="searchKwd(searchValue)"

      />

    </el-input>

        <el-table :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="tableDataSearch" @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: [],
　　　　　　　　　searchValue:'',
　　　　　　　　　tableDataSearch:[],
                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 [];
                }
            }
        },

  watch: {

    tableData:{// 加载页面后：通过搜索来加载数据，并且是浅拷贝

      immediate: true,

      handler(val) {

        if(Array.isArray(val)){

          // this.tableDataSearch = this.tableData

          this.searchKwd(this.searchValue)

          console.log(this.tableDataSearch,666);

        }

      }

    }

  },

        methods: {

    searchKwd(kwd){ //搜索与清空

      if(kwd){

        this.tableDataSearch = this.tableData.filter(v=>{

          return Object.values(v).join('').indexOf(kwd) !==-1

        })

      }else{

        this.tableDataSearch = this.tableData

      }

    },

// 分页
            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.tableDataSearch[index]);//对象合并：form赋值
            },
            // 删除当前下标：无需判断新建/编辑，直接调用接口后前端删除
            del(index) {
                // this.currentIndex = index;
                //this.tableDataSearch.splice(index, 1);
   　　　　　　　　const delId = this.tableDataSearch[index].id
　　　　　　　　　　const currentIndex = this.tableData.findIndex(v=>v.id === delId)
　　　　　　　　　　this.tableData.splice(currentIndex, 1);// 浅拷贝自动同步tableDataSearch,并通过监听tableData改变更新
　　　　　　　　　　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.tableSearch.push(obj);// 已通过监听同步
                this.tableData.push(obj);// 自动同步数据，如果后台有返回id，需要取新增返回对象处理后的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.tableDataSearch.splice(this.currentIndex, 1, obj);// 修改类似删除，只是多了一个替换对象obj
 　　　　　　　　　　const currentIndex = this.tableData.findIndex(v=>v.id === obj.id)
　　　　　　　　　　this.tableData.splice(currentIndex, 1, obj);// 浅拷贝自动同步
　　　　　　　　　　this.$message.success("修改成功");

            }
        }
    };
</script>

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