element 表单嵌套表格,带规则验证。

39 阅读1分钟

有些时候在业务需求中有这样一种场景,提交表单的时候需要添加条格式一样的数据,这时候就用到了表单里面嵌套表格,附上代码,

最外面使用form表单,内部再嵌套表格

<el-form
    :inline="true"
    ref="form"
    :model="formTableData"
    size="mini"
    abel-width="88px"
    :rules="rules"
>
<el-table
    :data="formTableData.list"
    style="width: 100%"
    border
    size="mini"
    @selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
    <el-table-column label="序号" width="50" align="center">
       <template slot-scope="scope">{{ scope.$index + 1 }}</template>
    </el-table-column>
    <el-table-column
       label="门店名称"
       prop="store"
       resizable
       align="center"
       header-align="center"
    >
       <template slot-scope="scope">
          <el-form-item
             :prop="'list.' + scope.$index + '.store'"
             :rules="rules.store"
          >
             <el-input
                style="width: 100%"
                v-model="scope.row.store"
                placeholder="请输入门店名称"
              />
            </el-form-item>
       </template>
   </el-table-column>
  </el-table>
</form>


data(){
  return{
    // 表格表单参数
     formTableData: {
        list: [],
     },
     rules: {
       store:[
         { required: true, message: "名称不能为空", trigger: "blur" },
       ],
     }
  }
}

以上是一个示例,后续字段根据业务需求去添加即可