标签:index obj form 拉新 改查 currentIndex table type tableData
背景:
避免每次新增、编辑、删除时频繁调用后台接口
部分实例:
<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>
说明:分页和表格可自行封装,统一配置。
标签:index,obj,form,拉新,改查,currentIndex,table,type,tableData 来源: https://www.cnblogs.com/wheatCatcher/p/12573386.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。