el-form包含中el-table的表单验证

最新推荐文章于 2025-03-20 15:33:52 发布

原创最新推荐文章于 2025-03-20 15:33:52 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

elementUI 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中实现el-form与el-table的双向数据绑定，通过配置rules进行表单验证，确保每个表格项都能进行有效的数据输入与校验。文章深入解析了在el-table中嵌入el-form-item的方法，以及如何动态绑定rules到具体字段，为开发者提供了实用的代码示例。

主要是rules和tableFirdata都要写在model里面
每一个el-form-item都要配置rules属性，不只是el-form才配置
正常的是prop,这里是 :prop

<el-form :rules="model.rules" :model="model"  ref="form">
<el-table:data="model.tableFirdata">
  <el-table-column label="XX名称" width='220'>
    <template slot-scope="scope">
      <el-form-item :prop="'tableFirdata.' + scope.$index + '.name'" :rules='model.rules.name'>
        <el-input v-model="scope.row.name"></el-input>
      </el-form-item>
  </template>
  </el-table-column>
  <el-table-column label="回路" width='90'>
    <template slot-scope="scope">
       <el-form-item :prop="'tableSecdata.' + scope.$index + '.loop'" :rules='model.rules.loop'>
            <el-input v-model="scope.row.loop"></el-input>
      </el-form-item>
    </template>
  </el-table-column>
</el-table>
</el-form>

data() {
    return {
      model: {
        rules: {
          name: [
            {
              max: 10,
              message: "最多输入十个字符!",
              trigger: "blur"
            }
          ],
          loop:[
           {
              max: 10,
              message: "最多输入十个字符!",
              trigger: "blur"
            }
          ]
        },
        tableFirdata: [],
      },
    },