element-ui表格里面添加表单,并且进行表单验证

小鱼儿心语：喷泉之所以漂亮是因为它有了压力；瀑布之所以壮观是因为它没有了退路；水之所以能穿石是因为永远在坚持。人生亦是如此。加油！

通过el-form和el-table的组合使用,在表格里面添加表单 并且进行验证 表单中v-model绑定scope.row中表格的数据.

<el-form :model="weightcontent" ref="queryRefqz" :inline="true" v-show="showSearch" label-width="68px" style="margin-left: 20px;height: 100%;" @submit.native.prevent>
    <el-table v-loading="loading" :data="weightcontent.bznrList" @selection-change="handleSelectionChange" class="tables">
      <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="编号" align="center" prop="number" width="50"/>
              <el-table-column label="标准" align="center" prop="content" width="250">
                <template #default="scope">
                      <span v-html="scope.row.content"></span>
                </template>
              </el-table-column>
              <el-table-column label="标准分值" align="center" prop="total" />
              <el-table-column label="权重" align="center" prop="weight" >
                <template #default="scope">
                    <el-form-item :prop="`bznrList.${scope.$index}.weight`" :rules="{
                    required: true,
                    message: '请输入权重',
                    trigger: 'blur',
                    }">
                      <el-input
                            v-model="scope.row.weight"
                            placeholder="请输入权重"
                            clearable
                            @blur.stop="$event => editSave(scope.row)"
                      >
                      </el-input>
                    </el-form-item>
                </template>
              </el-table-column>
    </el-table>
  </el-form>