form嵌套table表单验证_form table嵌套验证

###我们需要使用table但是table中会存在必要的输入框需要使用table和form进行组合嵌套

实现方式1：单个实现

##template

<el-form
            :model="contract"  //这里绑定的是form对象
            ref="contractForm"
            :rules="contract.rules" //表单的验证规则
            size="small"
          >
            <el-table
              border
              :header-cell-style="{background:'#D0DCEC',color:'#333',textAlign: 'center',}"
//background 可以改变表头的背景颜色，textAlign可以更改表头的对齐居中
 
              :height="400"
              :data="contract.tableData" //这里是table的数据data
              width="100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                fixed="left"
                align="center"
              >
              </el-table-column>
              <el-table-column
                type="index"
                align="center"
                :index="indexMethod"
                label="序号"
                width="55"
                fixed="left"
              >
              </el-table-column>
              <el-table-column
                :render-header="renderHeader"
                prop="swtcplxje"
                label="委托产品类型"
                width="150"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'tableData.' + scope.$index + '.swtcplxje'"  
//tableData是table的数据data ,scope.$index 为下标 ，swtcplxje 为当前的prop绑定值
 
                    :rules="contract.rules.swtcplxje"   
//表单的验证规则绑定
                  >
                    <el-input
                      :maxlength="999"
                      v-model="scope.row.swtcplxje"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
        <el-table>
<el-form>

###script：

//form绑定对象
contract: {
//表单验证的规则
     rules: {
        swtcplxje: [
                {
                  required: true,
                  message: "请输入",
                  trigger: ["blur"],
                },
              ],
    }，
//table数据绑定数组
    tableData: [],
},
//动态根据rules中的key和table中的prop进行比对表头添加小红星
renderHeader(h, { column }) {
          let arr = [];
          for (let key in this.contract.rules) {
            arr.push(key);
          }
          if (arr.includes(column.property)) {
            return [
              h("span", { style: "color:red" }, "*"),
              h("span", "" + column.label),
            ];
          } else {
            return [h("span", "" + column.label)];
          }
        },

###方式二：table循环绑定from验证

###template

 <div>
      <el-button @click="addrow" size="small">增行</el-button>
//model表示为需要绑定的对象，rules表单验证的规则 :rules="contract.rules" 表单验证规则
          <el-form :model="contract" :rules="contract.rules" ref="contractForm">
            <el-table
              border
              :header-cell-style="{
              background: '#f2f2f2',
              fontSize: '14px',
              textAlign: 'center', //表头对齐方式
              padding: '0px !important',
              color: '#626262',
            }"
              :height="400"
              :loading="contract.tableLoading"
              :data="contract.tableData"
              row-key="id"
              width="100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                fixed="left"
                align="center"
              >
              </el-table-column>
              <el-table-column
                type="index"
                align="center"
                :index="indexMethod"
                label="序号"
                width="55"
                fixed="left"
              >
              </el-table-column>
//进行行的遍历循环contract.tableList表头数据 ，:fixed="item.fixed 表示固定的位置  :render-header="renderHeader 动态对比rules每个的key和 :prop="item.value" 中是否一样，一样表头添加*
 
              <!-- <template> -->
              <el-table-column
                v-for="(item,index) in contract.tableList"
                :key="index"
                :label="item.label"
                align="center"
                :width="item.width"
                :prop="item.value"
                :fixed="item.fixed"
                :render-header="renderHeader"
              >
                <template slot-scope="scope">
// :prop="'tableData.' + scope.$index + '.'+ [item.value]" 动态关联每个prop
//:rules="contract.rules[item.value]" rules动态添加
 
                  <el-form-item
                    v-if="scope.$index > -1 && item.type==='input'"
                    :prop="'tableData.' + scope.$index + '.'+ [item.value]"
                    :rules="contract.rules[item.value]"
                  >
                    <!--                            -->
                    <el-input
                      size="small"
                      v-model="scope.row[item.value]"
                      :placeholder="item.label"
                    ></el-input>
                  </el-form-item>
 
                  <el-form-item
                    v-else-if="scope.$index > -1 && item.type==='number'"
                    :prop="item.value"
                  >
                    <el-input
                      size="small"
                      v-model="scope.row[item.value]"
                      placeholder="请输入"
                      @input="blurNumberFixed(scope.row[item.value], scope.$index,item.value)"
                    ></el-input>
                  </el-form-item>
 
                  <el-form-item
                    v-else-if="scope.$index > -1 && item.type==='select'"
                    :prop="item.value"
                  >
                    <el-select
                      size="small"
                      v-model="scope.row[item.value]"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(i, k) in item.options"
                        :key="k"
                        :label="i.label"
                        :value="i.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
 
                  <el-button
                    v-else-if="item.type==='operateion'"
                    type="danger"
                    size="small"
                    @click.native.prevent="deleteRow(scope.$index, contract.tableData)"
                  >
                    删除
                  </el-button>
 
                  <el-form-item
                    v-else-if="scope.$index > -1 && item.type==='date'"
                    :prop="item.value"
                  >
                    <el-date-picker
                      size="small"
                      v-model="scope.row[item.value]"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <!-- </template> -->
            </el-table>
          </el-form>
        </div>

实现效果：