table中添加和编辑功能共用一个form表单时可能出现的问题

 如上图所示两个按钮用的同一个弹出框,这里表单我是单独封装的一个组件

问题: 例如要验证用户名不能重复,当你在表单验证时,编辑和添加是共用一套表单验证规则，而在添加时: 约定所有的已有的用户名是不能使用的, 但是当你做编辑功能时,你只是改了别的数据,没改用户名,这种情况应该是允许的,但是你会发现用户名那一栏就会提示你的用户名必须唯一

下面我们说说解决方案: 

1.定义一个用来接收你验证表单需要用到的数据

 data() {
    return {
      // 用来接收验证表单数据的数组
      originList: []
    }
  }

 2.发送ajax请求数据把自己想要的数据解构出来

this.originList = res.data.depts.map(item => {
        return { id: item.id, code: item.code, name: item.name, pid: item.pid }
      })

3.定义验证函数(认真看,关键点)

const existCodeList = (rule, value, callback) => {
  // 1. 把从父组件传过来的表单验证需要的变量解构出来
  const { originList, id, isEdit } = this
  // 2. 判断用户点击的是否是编辑按钮
  const arr = isEdit
  // 3. 如果是先排除自己,因为编辑的时候你不改他应该也能通过校验
  // 4. 然后把用户名单独拎出来赋给arr
    ? originList.filter(item => item.id !== id).map(item => item.code)
  // 5. 如果不是,也就是用户点击的是添加按钮,我们只需要把用户名单独拎出来给arr就行
    : originList.map(item => item.code)
  // 6. 然后判断arr中是否有输入框中的值
  arr.includes(value)
  // 7. 如果有就提示用户用户名已经被占用
    ? callback(new Error('编码' + value + '已经存在'))
  // 8. 如果没有就通过验证
    : callback()
  // 重点是如果用户点击的是编辑按钮的话我们需要额外把自己从originList里面挑出来 ***
}

可能说的不是很详细,望大家多多谅解,希望能给大家带来帮助