前端实现拉新——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>
说明：分页和表格可自行封装，统一配置。
