SoFunction
Updated on 2025-04-06

Implementation of el-input verification in el-table in element

This article mainly introduces the implementation of el-input verification in el-table in element, as follows:

<el-form
            :model="formParams"
            :rules="rules"
            ref="ruleForm"
            label-width="0">
            <el-tabs v-model="activeName" type="card" @tab-click="changeTab">
              <el-tab-pane v-for="item in tabList" :name="" :key="">
                <div slot="label">
                 {{}}({{totalCount[] || 0}})
                </div>
                <el-table
                  v-show="activeName==='xxx'"
                  :row-class-name="tableRowClass"
                  :data=""
                  border>
                  <el-table-column
                    min-width="10%"
                    prop="num"
                    label="quantity">
                    <template slot-scope="scope">
                      <el-form-item :prop="'xxxData.' + scope.$index + '.num'" :rules="">
                        <el-input v-model=""
                                  maxlength="6"
                                  @input="value => = Number((/[^\d]/g,''))"
                                  size="small"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column
                    min-width="20%"
                    label="time">
                    <template slot-scope="scope">
                      <el-time-picker
                        style="width: 45%"
                        v-model=""
                        value-format="HH:mm:ss"
                        :picker-options="{
                          selectableRange: '00:00:00 - 12:59:59'
                        }"
                        size="small"
                        placeholder="Start Time">
                      </el-time-picker> -
                      <el-time-picker
                        style="width: 45%"
                        v-model=""
                        value-format="HH:mm:ss"
                        :picker-options="{
                          selectableRange: `${ ?  : '00:00:00'}-12:59:59`,
                        }"
                        size="small"
                        placeholder="End Time">
                      </el-time-picker>
                    </template>
                  </el-table-column>

                  <el-table-column
                    min-width="10%"
                    label="operate">
                    <template slot-scope="scope">
                      <a  @click="delete(scope.$index)">delete</a>
                    </template>
                  </el-table-column>
                  
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-form>

1. Check num when clicking to save

data() {
    return {
        num: [
          { required: true, message: 'Please enter quantity', trigger: 'change' },
        ]
    }
},
methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    }
  }

2. Since each tab page displays a different data list, and each list can add a new data, if you want to prompt specific information when saving, if "the number of xxx cannot be empty" and "the number of yyy cannot be empty", you can loop through different data lists when clicking to save.

(, 'xxx');
(, 'yyy');

validateNum(list, msg) {
      if (list &&  && (item =>  === '') !== -1) {
        (msg);
      }
    }

if () {
        message += `${('、')}The number of cannot be empty；`;
 }

3. If you put <el-form> in the <el-tab> loop, use the form form in the v-for loop to verify this.$refs[formName].validate, an error TypeError: this.$refs[formName].validate is not a function:

Since this.$refs[formName] is an array, use this.$refs[formName][0].validate((valid) => {}

4. The time-picker wants to set the end time greater than the start time

selectableRange: `${ ?  : '00:00:00'}-12:59:59`

5. Assign a special style to the specified line in el-table

tableRowClass(val) {
      if ( === 'xxxxxx') {
        return 'row-disable';
      } else {
        return '';
      }
    }

6. Only numbers can be entered in el-input

<el-input
    v-model="count"
    @input="value => count = Number((/[^\d]/g,''))"
</el-input>

This is the article about the implementation of el-input verification in el-table in element. For more related el-input verification content in el-table, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!