基于element的增删改查思路
1.find查询数据
//初始化页面表格数据
getTableList(arg) {
var params = {
pageIndex: this.pageIndex,
size: this.size
};
if (arg && this.isSearching) {
Object.assign(params, this.searchParam);
}
this.axiosHttp.post("fl/flCfry/find", params).then(res => {
this.tableData = res;
this.currentPageNum = "";
console.log(res);
});
},
1.params固定的分页传值,跟data上的size、page同步即可
2.arg即删除的时候需要添加的参数,和查询的时候需要带的参数(增加和修改调同一个方法不需要传分页)
3.this.isSearching 即在点击搜索的时候判断是否在搜索状态,为true时即操作完之后带上需要查询的参数
2.save增加数据
html:新增和编辑用同一个弹出框
<el-dialog
:title="editform.id ? '修改' : '新增'"
:visible.sync="formDialogVisible"
width="40%"
>
<el-form
:model="editform"
ref="editform"
label-width="80px"
style="padding:30px;"
:rules="rules"
>
<el-form-item label="姓名" prop="uname">
<el-input v-model="editform.uname"></el-input>
</el-form-item>
<el-form-item style="margin-top: 30px;">
<el-button type="primary" @click="save('editform')">保存</el-button>
<el-button @click="close">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
//保存
save(editform) {
this.$refs[editform].validate(valid => {
if (valid) {
this.axiosHttp.post("fl/flCfry/save", this.editform).then(res => {
this.formDialogVisible = false;
if (this.isSearching) {
this.getTableList("search");
} else {
this.getTableList();
}
this.editform = {};
});
} else {
}
});
},
正常调用查询数据,注意的是要判断是否在查询状态,如果为true要带上参数(参数即搜索框editform)
3.delete 删除数据
//删除
del() {
let id = "";
this.selectRow.forEach(item => {
id += item.id + ",";
});
var obj = {
id: id
};
this.$confirm("确定要删除吗,是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(res => {
this.axiosHttp.get("fl/flCfry/delete", { params: obj }).then(res => {
//解决第二页删除所有条数不能返回数据
if (
this.tableData.data.length == this.selectRow.length &&
this.pageIndex > 1
) {
this.pageIndex = this.pageIndex - 1;
}
if (this.isSearching) {
this.getTableList("search");
} else {
this.getTableList();
}
});
})
.catch(() => {});
},
这个是多选删除的例子,是把数据循环对比删除的,
1.其中遇到的问题是在删除当前页的时候删除完毕当前显示空,其中判断了要删除的长度和当前页的长度,如果一样,则会删除当前页所有数据,就把当前页减少一
2.此时也要判断是否在搜索状态,然后重新查询数据
4.修改
//修改
edit() {
if (this.selectRow.length > 1) {
this.$message({
showClose: true,
type: "warning",
message: "不允许同时编辑多条数据"
});
} else {
this.editform = JSON.parse(JSON.stringify(this.selectRow[0]));
this.formDialogVisible = true;
delete this.editform.createTime;
delete this.editform.updateTime;
}
},
修改较为简单,调用的是同一个方法,已经判断过isSearching
5.查询
//查询
searchTableList() {
this.isSearching = true;
this.pageIndex = 1;
this.getTableList("search");
},
查询直接调用getTabbleList方法,默认传参
6.操作里面的编辑和删除
// 操作的删除
handleDelete(index, row) {
this.selectRow = [];
this.selectRow.push(row);
this.del();
},
//编辑
handleEdit(index, row) {
this.formDialogVisible = true;
this.editform = JSON.parse(JSON.stringify(row));
delete this.editform.createTime;
delete this.editform.updateTime;
},
7.重置和分页、弹出框取消的操作
//重置
resetForm() {
this.isSearching = false;
this.searchParam = {};
this.getTableList();
},
1.重置直接可以把搜索栏清空
2.把当前搜索状态设置为false,以防止,重置之后再再次输入而并没有点击查询出现的问题
3.默认不传参数(只传分页重新渲染数据)
//点击分页获取当前页数据
handleCurrentChange(val) {
this.pageIndex = val;
if (this.isSearching) {
this.getTableList("search");
} else {
this.getTableList();
}
}
4.分页处理,改变页数的响应页面,并且判断是否在isSearching状态
//关闭弹窗后续操作
close() {
this.formDialogVisible = false;
this.editform = {};
this.$refs.editform.resetFields();
},
点击取消的时候,除了关闭弹窗,还需要把弹框置空,把表格验证清除掉
遗留问题:
在搜索的时候,输入关键词的时候,如果用户输入之后再清空,就会出现传入参数为空的状态,当时觉得是前端处理起来要特别麻烦,需要无数判断,最终经过协商java后台解决了。大致思路:在接受参数的时候,添加一个工具类,然后再里面对空的值做一个处理,(就是把空的置为null)这样就可以了