el-table嵌套el-form表单的案例

添加和编辑时显示的是form表单,默认展示的是text

1.控制form表单和text展示的第三方变量

变量:唯一且互不影响

添加的时候,借助list.length作为curId

编辑校验,传入当前行下的curId实现校验

 for (let key in this.entryList) {

        validates = await Promise.all([

          this.promiseValidate('ipForm' + key),

          this.promiseValidate('portForm' + key),

        ])

      }

//找不到dom元素,报错

2. 一次性添加多条,实现校验

借助promise.all

 promiseValidate(key) {
      return new Promise((resolve, reject) => {
        try {
          this.$refs[key].validate(isValid => {
            resolve(isValid)
          })
        } catch (err) {
          reject(err)
        }
      })
    },

  case:对于IP地址的校验

 <el-table-column label="源地址" align="center" width="160">
        <template slot-scope="scope">
          <el-select
            v-if="scope.row.Addflag || scope.row.isEdit"
            v-model="Emptyselect"
            placeholder="请选择"
            style="width: 150px"
          >
            <el-option label="IP地址" value=""> </el-option>
          </el-select>
          <span v-if="!scope.row.isChange">{{
            scope.row.sourceIpAddress
          }}</span>
          <el-form
            style="margin-top: 10px"
            :ref="'SourceIpForm' + scope.row.curId"
            :key="scope.row.curId"
            label-width="0px"
            :class="
              scope.row.Addflag || scope.row.isEdit ? 'demo-ruleForm' : ''
            "
            :model="scope.row"
            v-show="scope.row.Addflag || scope.row.isEdit"
          >
            <el-form-item
              prop="sourceIpAddress"
              :rules="[
                {
                  trigger: 'blur',
                  id: scope.$index,
                  validator: validateValue,
                },
              ]"
            >
              <el-input
                v-model.trim="scope.row.sourceIpAddress"
                style="width: 150px"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

3. 确认添加的时候,需要筛选出,新增的数据,并对其内容进行校验,全部符合条件的情况下,才允许调对应的添加或编辑接口,实现数据更新;    

 async confirmAdd() {
      //过滤出list中addFlag=true新增的数据
      let AddItems = this.list.filter(item => {
        return item.Addflag == true
      })
      var validates = null
      for (let key in AddItems) {
          validates = await Promise.all([
            this.promiseValidate('SourceIpForm' + AddItems[key].curId),
            this.promiseValidate('TargetIpForm' + AddItems[key].curId),
            this.promiseValidate('sourcePort' + AddItems[key].curId),
            this.promiseValidate('targetPort' + AddItems[key].curId),
          ])
      }
      let flag = validates.every(item => item == true)
      if (flag) {
        this.isLoading = true
        this.Dialogs.created = !this.Dialogs.created
        this.showFooter = false
        let newArrVal = JSON.parse(JSON.stringify(AddItems))
        newArrVal.map(e => {
          delete e.Addflag
          delete e.isChange   //添加或编辑时的标识
        })
        //添加的接口
        let obj = {
          policiesId: this.ruleId,
          insertAfter: this.insertAfter,
          insertBefore: this.insertBefore,
          list: newArrVal,
        }
        addRule(obj).then(this.flashParent).catch(this.flush)
      }
    },

4.编辑时踩得坑

• 针对端口类型的数据,进行回显的时候,绑定在input,被转换为String;所以在执行回显的这一步,将对应的数据强制转换为对应的数据类型;避免内容显示在input上,走校验的时候不符合条件;
• 将回显的数据删除,点确认,提示内容不能为空,再次点编辑,上一次的校验内容仍存在;如何清空上一次的校验,将curId,作为key,添加到每一个form对应的位置;即可实现清除校验;

5.在使用 this.$refs[key].validate验证对应的form时

•  this.promiseValidate('headerForm' + key),不是在for...in时调用的话;直接在promiseValidate函数中使用  this.$refs[key],即可获取到对应的元素

• 在for...in中调用this.promiseValidate('headerForm' + key)的话,此时的  let dom = this.$refs[key] //[vcomponent] ,因此在promiseValidate函数中使用  this.$refs[key][0],才能获取到对应的元素；（场景）

• 

   

• 获取不到dom元素,报this.$refs.......is not a function的错;