el-table和el-form嵌套使用,并校验

说明:
1.对于表格的数据结构相当于在tableData外层嵌套了一个表单。
2.在最完成包裹一个form,然后在用el-form-column将每个el-form-column再进行包裹。
3.利用rules进行自动校验。

 //html部分
 <el-form :model="form" label-position="left" label-width="100" ref= "form">
        <el-form-item label="其他表单项" prop="name" :rules="rules.name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
     
          <el-table :data="form.tableData" border stripe>
            <el-table-column label="该列单元格校验">
              <template slot-scope="{ row, $index }">
                <el-form-item
                  :prop="`tableData.${$index}.input`"
                  :rules="rules.input"
                >
                  <el-input v-model="row.input"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
      </el-form>
 // data部分
  form: {
    
    
        name: "",
        tableData: [
          {
    
     input: "" },
          {
    
     input: "" },
          {
    
     input: "" },
          {
    
     input: "" },
          {
    
     input: "" }
        ]
      },
      rules: {
    
    
        name: [
          {
    
     required: true, trigger: ["blur", "change"], message: "请选择" }
        ],
        input: [
          {
    
     required: true, trigger: ["blur", "change"], message: "请选择" }
        ]
      },

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_42931285/article/details/124744345