el-form和el-table表单验证

最新推荐文章于 2023-10-27 17:47:56 发布

DazzlingPing

最新推荐文章于 2023-10-27 17:47:56 发布

阅读量343

点赞数

文章标签： elementui 前端 vue

本文链接：https://blog.csdn.net/DazzlingPing/article/details/128300909

版权

需求如下

1、ERP编号有值那么ERP吨数必填

2、ERP件数必填

使用el-form结合el-table进行表单验证

代码涉及如下

1、表头添加*号必填

2、点击提交提示需要输入的地方

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../3rd/elementui/index.2.15.9.css" />
    <style>
      .el-form.my-ruleForm .table_change_style .el-table__row .el-form-item__content,
      .el-form.my-ruleForm .el-form-item.no_Left .el-form-item__content {
        margin-left: 0 !important;
      }
      .el-form.my-ruleForm .table_change_style .el-table__row .el-form-item {
        width: 100%;
        margin-bottom: 0;
        padding: 10px 0;
      }
      .el-table td,
      .el-table th {
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-form
        label-width="160px"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="my-ruleForm"
      >
        <el-table
          class="table_change_style"
          border
          :data="ruleForm.actualSendReceiveDetails"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :row-key="(row)=>{return row.currentTime}"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" width="50">
            <template slot-scope="scope"> {{scope.$index+1}} </template>
          </el-table-column>
          <el-table-column
            v-for="(d,index1) in goodDetailHeader"
            :key="index1"
            :prop="d.fieldName"
            :label="d.columnComments"
          >
            <template slot="header">
              <div class="tc"><i class="red_xing" v-if="d.isRequire">*</i> {{d.columnComments}}</div>
            </template>
            <template slot-scope="scope">
              <div>
                <el-form-item
                  v-if="d.fieldName=='erpWeight'"
                  :prop="'actualSendReceiveDetails.' + scope.$index + '.erpWeight'"
                  :rules="scope.row.erpCode ? rules.erpWeight : []"
                >
                  <el-input v-model="scope.row.erpWeight" class="w_90"></el-input>
                </el-form-item>
                <el-form-item v-else-if="d.fieldName=='erpCount'"
                :prop="'actualSendReceiveDetails.' + scope.$index + '.erpCount'"
                :rules="rules.erpCount"
                >
                  <el-input
                    v-model="scope.row[d.fieldName]"
                    class="w_90"
                  ></el-input>
                </el-form-item>
                <el-form-item v-else>
                  <el-input
                    v-if="d.columnType=='input-text'"
                    v-model="scope.row[d.fieldName]"
                    class="w_90"
                  ></el-input>
                  <div v-else>{{scope.row[d.fieldName]}}</div>
                </el-form-item>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="submit" type="button">提交</el-button>
      </el-form>
    </div>
    <script src="../../3rd/vue/vue.min.js"></script>
    <script src="../../3rd/elementui/index.2.15.9.min.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data() {
          return {
            type: 'add',
            goodDetailHeader: [
              {
                fieldName: 'erpCode',
                columnComments: 'ERP单据编号',
                isRequire: false,
                columnType: 'input-text'
              },
              {
                fieldName: 'erpWeight',
                columnComments: 'ERP吨数',
                isRequire: false,
                columnType: 'input-text'
              },
              {
                fieldName: 'erpCount',
                columnComments: 'ERP件数',
                isRequire: true,
                columnType: 'input-text'
              },
              {
                fieldName: 'avgWeight',
                columnComments: '平均件重',
                isRequire: false,
                columnType: 'text'
              },
              {
                fieldName: 'currentWeight',
                columnComments: '本次核销吨数',
                isRequire: false,
                columnType: 'input-text'
              },
              {
                fieldName: 'currentNumber',
                columnComments: '本次核销件数',
                isRequire: false,
                columnType: 'input-text'
              }
            ],
            ruleForm: {
              actualSendReceiveDetails: [
                {
                  erpCode: '',
                  erpWeight: null,
                  erpCount: null,
                  avgWeight: null,
                  currentNumber: null,
                  currentWeight: null,
                  isShow: false
                },
                {
                  erpCode: '',
                  erpWeight: null,
                  erpCount: null,
                  avgWeight: null,
                  currentNumber: null,
                  currentWeight: null,
                  isShow: false
                }
              ]
            },
            rules: {
              erpWeight: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
              erpCount: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            }
          }
        },
        methods: {
          handleSelectionChange() {},
          submit() {
            let self = this
            this.$refs['ruleForm'].validate((valid, obj) => {
              console.log(valid)
              if (valid) {
                console.log(valid)
              } else {
                return false
              }
            })
          }
        }
      })
    </script>
  </body>
</html>