表格動態加載行數，並在行數中驗證輸入情況,特別是行數之間輸入不能相同

表格示例:

該案例在動態表格中，驗證同一個字段是否爲空，是否超出最大限制字符 ，是否做不重名驗證；

示例中主要是驗證對應別名（columnComment）字段，

所有對每個別名字段循環一個el-form rules model

對每個循環的 el-form-item中加入 :ref="`elFormItem${scope.$index}`" 

        <el-table :data="tableFieldList"
                      class="data-field-table">
                <el-table-column prop="columnName"
                                 label="變量名稱">
                    <template slot-scope="scope">
                        <long-str-cut>{{scope.row.columnName}}</long-str-cut>
                    </template>
                </el-table-column>
                <el-table-column prop="columnType"
                                 label="類型">
                </el-table-column>
                <el-table-column prop="columnComment"
                                 label="對應別名">
                    <template slot-scope="scope">
                        <el-form :ref="`tableRow${scope.$index}`"
                                 :model="scope.row"
                                 :rules="rules">
                            <el-form-item :ref="`elFormItem${scope.$index}`"
                                          prop="columnComment">
                                <el-input size="small"
                                          v-model.trim="scope.row.columnComment"
                                          placeholder="請輸入對應別名" />
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
            </el-table>

 

computed: {
    
        rules() {
            return { columnComment: [{ validator: this.validateName, trigger: 'blur' }] }
        }
    },

 validateName(rule, value, callback) {
            if (!value) {
                return callback(new Error('不能爲空！'))
            }
            if (value.length > 10) {
                return callback(new Error('請輸入10個及以內的別名字符！'))
            }
            //檢測重名步驟
            let index = 0
            for (let i = 0; i < this.tableFieldList.length; i++) {
                //尋找是否訊在重複別名
                if (this.tableFieldList[i].columnComment === value) {
                    index += 1
                }
                //首先找出其他error顯示框
                //如果error 就手動驗證一次
                if (this.$refs['elFormItem' + i].validateState === 'error') {
                    this.$refs['tableRow' + i].validateField('columnComment')
                }
            }
            if (index > 1) {
                return callback(new Error('存在相同的別名！'))
            }
            callback()
        },

   submitForm() {
            let success = [];
            for (let i = 0; i < this.tableFieldList.length; i++) {
                this.$refs['tableRow' + i].validate((valid) => {
                    if (valid) {
                        success.push(true)
                    }
                });
            }
            if (success.length < this.tableFieldList.length) {
                this.$message.warning('存在錯誤別名，請更改！')
            } else {
                //保存操作
                this.addOrSave()
            }
        },