这个是基于Element-ui 组件库实现的修改编辑功能的一些简单常规操作
这是在上一节增加文章的基础上来进行修改,用的是同一个弹窗,所以操作起来稍微复杂一点
同样先来看一下代码~~
1.首先我们在父组件里面点击编辑按钮打开弹窗
2.之后需要做的就是子组件里面调用详情接口,将数据传给form让他回显出现,(数据回显)
数据回显:就是你点击需要修改的内容,需要让他内容显示出来
这个详情接口是我们自定义的,但是什么时候调用的,(窗口打开的时候调用详情接口,完成数据回显)
在element-ui的对话框(就是我们说的弹窗)里面有一个open
open:对话框 打开的回调
3.回显完成之后,我们点击确定按钮,调用后台接口,完成编辑操作
但是再开始的时候我就说过,我新增跟编辑用的是同一个窗口,再点击确定的时候我怎么区分这是编辑还是新增呢?
解决方法:找到不同点
在vue的调试工具里面可以查看,新增跟编辑肯定是有他的不同点的比如我这个案例里面,
新增没有id,
但是编辑有
找到不同点之后我们可以根据他id来进行判断,如果有id就是编辑,没有id就是新增
这还没有结束呢!!
有些坑还是要解决的
1.第一个☝🏻,我们是不是需要点击编辑数据回显?但是我发现我在点击新增的时候也会出现数据的回显,这个是为什么呢?
想一下,在我们完成数据会显得过程中什么情况下要数据回显,是不是弹窗打开的时候,
那么新增需不需要打开弹窗?
弹窗打开了会不会数据回显?
相信你已经找到问题所在了👍🏻
解决问题:既然是在弹窗打开的时候出现的问题,那么我们可不可以换一种方式调用他完成数据的回显, 想一想 我们是不是点击编辑的时候需要调用接口完成数据回显? 那我们就可以在父组件的点击编辑的时候调用子组件里接口
1.在我们父组件给子组件添加一个ref,这样就可以拿到我们子组件里面的数据
2.在编辑的时候调用我们子组件里的数据回显接口,
这样是不是就只有在点击编辑的时候出现数据回显而不是在窗口打开的时候数据回显了
2.我们只修改其中一项,他的编码会出现不允许重复的校验规则,这个校验规则是在新增的时候做的,为了防止code编码在添加的时候出现重复,但是在这里也会出现
解决思路:
1.把当前要编辑的code单独缓存下来将来作为判断依据
2. 改写校验方法 在编辑状态时去掉自己
const validateCode = (rule, value, callback) => {
// 完成非重复判断
// 问题原因：编辑时 输入框回显的code已经在sourceList中了
// 解决思路：如果是编辑的业务状态 从sourceList中删除掉自己即可
// 遇到问题：由于输入框是可以进行编辑的并且是双向绑定的 一旦进行修改之后 将不知道要剔除掉那个了
// 解决问题：将初次回显出来的code码暂存一下 作为将来要剔除掉的code码
let list = []
if (this.formData.id) {
// 编辑状态
list = this.sourceList.filter(item => item !== this.cacheCode)
} else {
// 新增状态
list = this.sourceList
}
if (list.includes(this.formData.code)) {
// 出现重复
callback(new Error(‘当前输入的code码已经存在’))
} else {
callback()
}
}
这样整个编辑功能就ok啦