今天完成的事
1，编辑，新增列表项的逻辑代码：
因为编辑页与新增页的重合，提交修改或新增对应的请求，以及请求参数不一样；通过判断页面url是否携带路由参数id，选择相应的函数处理请求；
每次提交需要先行进行表单验证，确保数据符合请求需要
methods: {
submitForm() {
// console.log(this.$refs.ruleForm);
// console.log(this.$refs[formName]);
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.ruleForm.img = this.imgSrc
if (this.id) {
this.ruleForm.createAt = Date.now()
// console.log(this.ruleForm);
// console.log(this.$qs.stringify(this.ruleForm));
this.$axios.put(`api/a/u/article/${this.id}`, this.$qs.stringify(this.ruleForm))
.then(res => {
if (res.data.code == 0) {
alert("操作成功！")
this.$router.push('/article-list')
}
})
}else {
// console.log(this.ruleForm);
// console.log(this.$qs.stringify(this.ruleForm));
this.$axios.post('api/a/u/article', this.$qs.stringify(this.ruleForm))
.then(res => {
if (res.data.code == 0) {
alert("操作成功！")
this.$router.push('/article-list')
}
})
}
// alert('编辑成功!');
} else {
alert('提交失败！');
return false;
}
});
},
在其他方法中调用：
//立即上线
submitOnline() {
this.ruleForm.status = 2;
this.submitForm()
},
//存为草稿
submitDrafts() {
this.ruleForm.status = 1;
this.submitForm()
},
//取消操作
cancelEdit() {
alert("确定取消操作吗？")
this.$router.push('/article-list')
},
2，修改ElementUI组件中的表单验证，因为组件中的表单的模拟select在页面传递的id请求返回数据展示时，没有按照后台返回的数据数值选择对应得选项文本，于是将组件中得模拟select换成原本的select：
组件中的模拟select：
更换为select元素：
3，修正列表展示页数据清空缺陷，列表页侧边导航栏换为手风琴样式，登录单页组件添加更多样式进行美观；
明天得计划
1，整理知识点，准备进入复盘；
遇到的问题
1，ElementUI表单验证中模拟select接受后台数据显示问题，一开始想到在vue属性中使用过滤器，但是不能使用，或者使用效果不佳；随后通过vue得计算属性，虽然生效，但是会导致模拟select不能正常使用；随后测试在ElementUI表单中使用select元素，测试成功，并且保持表单验证得正常功能；
收获
1，在vue属性中使用过滤器（虽然测试使用效果不太好）
https://blog.csdn.net/wangxiaoxiaosen/article/details/94000954
2，vue绑定属性，class得更多实例参考；
https://www.jianshu.com/p/db4c7e7b7f2c
返回列表
评论