背景：
避免每次新增、編輯、刪除時頻繁調用后台接口
部分實例：
<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>
說明：分頁和表格可自行封裝，統一配置。