【elementui笔记：el-table表格的输入校验】

之前做得比较多的校验是在el-form表单里做的，但有时也遇到，需要在table内输入数据，然后校验输入的数据是否符合要求的情况。因此记录一下。

思路：
1.需要借助el-form的校验，el-table外层嵌套一层el-form，使用el-form的校验机制
2.由于每行都需要校验，因此需要借助scope.$index
3.借助一个提交按钮，测试校验

效果：
1.不输入数据，直接点击“提交”触发校验，由于数据没有输入，校验不通过，给出校验提示
2.点击输入框输入，点击某一个字段，即正在输入状态，这个字段的校验结果就会被清除（clearValidate）
3.数据都填好之后，点击“提交”，再次触发校验
4.校验通过，显示全屏提示是否提交，点击“确定”即可，控制台会打印“校验通过

    

      
        
          
            
          
          
            
          
          
            
          
          
            
          
        
      
      

        提交
      
    

data数据

           baseForm: {
               demoList: [
                {
                  name: "",
                  age: "",
                  birthday: "",
                  address: ""
                }
                ]
            },
            index: 0,
            rules: {
              name: [
                {
                  required: true,
                  message: "请输入姓名",
                  trigger: "blur"
                }
              ],
              age: [
                { required: true, message: "请输入年龄", trigger: "blur" }
              ],
              birthday: [
                { required: true, message: "请选择出生日期", trigger: "change" }
              ],
              address: [
                { required: true, message: "请输入详细地址", trigger: "blur" }
              ],
            }

method：
给一个提交按钮，测试校验

// 提交核对账目
submit() {
    this.$refs.baseForm.validate((valid) => {
         if (valid) {
            this.$confirm("您确定【提交】？", "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }).then(() => {
               console.log("校验通过")
            })
         }
     })
}

例子里使用的css：

  .all {
    width: 100%;
  }
  .flex-c-a {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .margin-top-10 {
    margin-top: 10px;
  }
  .base-form.el-form-item__content {
    margin-left: 0;
  }