JeecgBoot之JEditableTable自定义函数的应用

JEditableTable自定义函数的应用之多参数组合判断唯一

代码

columns: [
    {
     
      title:'字段1',
      align:"center",
      width: '140px',
      ellipsis: true,//设置超出部分隐藏
      key: 'nameOne',//字段
      type: FormTypes.input,//设置当前类型为输入框
      placeholder: '请输入${title}',//提示信息
      validateRules: [//验证
        {
     
          required: true,//在前端设置此字段必填
          message: '${title}不能为空',//在前端设置此字段不能为null,提示文本
          // 自定义函数校验 handler,表单验证
          handler(type, value, row, column, callback, target) {
     
            if (type === 'input') {
     //表示方式为输入的操作才进来
              //验证gradationType和specsType结合下的唯一性
              let {
      values } = target.getValuesSync({
      validate: false })//获取表格所有的数据
              let count = 0;
              let nameTwo = "";//可能由于下m面验证采用的是===,所以此处定义的名字也要和字段名一样。
              //遍历
              values.forEach(item => {
     
                if (row.id == item.id) {
     //通过id找到自己的数据
                  nameTwo = item.nameTwo;//获取需要验证的字段
                }
              })
              //循环遍历进行验证
              for (let val of values) {
     
                if (val['nameOne'] === value && val['nameTwo'] === nameTwo) {
     
                  if (++count >= 2) {
     //因为遍历的时候会遍历到本身的数据,所以此处是遍历到俩条一样的数据就不唯一
                    callback(false, '${title}不能重复')
                    return
                  }
                }
              }
              callback(true) // true = 通过验证
            } else {
     
              callback()
            }

          }
        }
      ],
    },
    {
     
      title:'字段2',
      align:"center",
      //dataIndex: 'specsType'
      width: '140px',
      ellipsis: true,
      key: 'nameTwo',
      type: FormTypes.input,
      placeholder: '请输入${title}',
      validateRules: [
        {
     
          required: true,//在前端设置此字段必填
          message: '${title}不能为空',//在前端设置此字段不能为null,提示文本
          // 自定义函数校验 handler,表单验证
          handler(type, value, row, column, callback, target) {
     
            if (type === 'input') {
     
              //验证gradationType和specsType结合下的唯一性
              let {
      values } = target.getValuesSync({
      validate: false })
              let count = 0;
              let nameOne = "";
              values.forEach(item => {
     
                if (row.id == item.id) {
     
                  nameOne = item.nameOne;
                }
              })
              for (let val of values) {
     
                if (val['nameTwo'] === value && val['nameOne'] === nameOne) {
     
                  if (++count >= 2) {
     
                    callback(false, '${title}不能重复')
                    return
                  }
                }
              }
              callback(true) // true = 通过验证
            } else {
     
              callback()
            }

          }
        }
      ],
    },
 ]

VUE中验证多参数组合唯一性:

/*验证多参数组合唯一性*/
/*单个适用,传入对象*/
checkOneParamsOnly(value) {
     
 //获取所有数据
 let {
      values } = this.$refs.editableTable.getValuesSync({
     validate: false});
 let count = 0;
 for (let j = 0; j < values.length; j++) {
     
   if (values[j].specsType == value.specsType && values[j].gradationType == value.gradationType) {
     
     if (++count >= 2) {
     
       return false;
     }
   }
 }
 return true;
},
/*批量适用,传入数组*/
checkMultipleParamsOnly(values) {
     
 for (let i = 0; i < values.length; i ++) {
     
   let count = 0;
   for (let j = 0; j < values.length; j++) {
     
     if (values[j].specsType == values[i].specsType && values[j].gradationType == values[i].gradationType) {
     
       if (++count >= 2) {
     
         return false;
       }
     }
   }
 }
 return true;
},

此处要注意的是不要使用forEach进行双重遍历,貌似是因为forEach遍历实际上是函数,所以return之后并没有跳出封装的方法。结果就是会一直遍历完所有,然后返回true。需要额外处理才有用

你可能感兴趣的:(JeecgBoot,VUE,js)