el-table与el-form同用,并校验

效果图

效果图.png

这里是以添加商品内容为案例，上面的名称就是正常的form表单校验。下面的内容详情的输入校验

   <el-form
      :model="formInline"
      status-icon
      ref="formInline"
      class="demo-formInline"
      :rules="rules"
    >
      <div
        class="iconContent"
        v-for="(item, index) in formInline.commoditySetMealDTOS"
        :key="index"
      >
        <el-button
          type="text"
          icon="el-icon-remove-outline"
          @click="delOne(index)"
        ></el-button>
        <div class="content">
          <div class="content-top">
            <el-form-item
              :prop="'commoditySetMealDTOS.' + index + '.title'" 
              :rules="rules.title"  
            >
              <el-input 
                v-model="item.title"  
                placeholder="请输入名称"
                maxlength="20"
              ></el-input>
            </el-form-item>
            <el-button size="small" @click="addTwo(index)">添加二级</el-button>
          </div>
          <el-table
            :data="item.commoditySetMealDetailDTOS" //重点1
            border
            fit
            highlight-current-row
            style="width: 750px"
          >
            <el-table-column
              align="center"
              label="内容详情"
              show-overflow-tooltip
              width="450"
            >
              <template slot-scope="scope">
                <el-form-item  //重点2
                  :prop="
                    'commoditySetMealDTOS.' +
                    index +
                    '.commoditySetMealDetailDTOS.' +
                    scope.$index +
                    '.content'
                  "
                  :rules="rules.content"  //重点3
                >
                  <el-input
                    v-model="scope.row.content" //重点4
                    placeholder="请输入内容详情"
                    maxlength="23"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="金额（元）"
              prop="money"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-form-item>
                  <el-input
                    v-model="scope.row.money"
                    placeholder="请输入金额"
                    clearable
                    maxlength="10"
                    type="number"
                    @blur="blurSale($event, index, scope.$index)"
                  />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  class="content-table-btn"
                  @click="delTwo(index, scope.$index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>

<script>
export default {
  data() {
    return {
      loading: false,
      formInline: {
        commoditySetMealDTOS: [{ commoditySetMealDetailDTOS: [{}] }], //商品内容数据
      },
      rules: {
        content: [
          { required: true, message: '请输入内容详情', trigger: 'blur' },
        ],
        title: [
          { required: true, message: '请输入一级分类名称', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    // 金额校验
    blurSale(e, index1, index2) {
      const val = e.target.value
      if (!/^(([0-9]+)|([0-9]+\.[0-9]{0,2}))$/.test(val) && val != 0) {
        this.$message.warning('只能是数值，限2位小数')
        this.formInline.commoditySetMealDTOS[index1].commoditySetMealDetailDTOS[
          index2
        ].money = ''
      }
      this.formInline = JSON.parse(JSON.stringify(this.formInline))
    },
  //这里是个组件 所以只要展示校验
    validateForm() {
      let flag = null
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    },
}
</script>