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. 判断用户点击的是否是编辑按钮