在el-table中循环表单并验证

最新推荐文章于 2025-06-05 17:52:26 发布

原创最新推荐文章于 2025-06-05 17:52:26 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element-ui #el-table #el-form

vue 专栏收录该内容

25 篇文章

订阅专栏

本文分享了在Vue项目中，如何使用el-table组件实现动态添加数据行，并对每行的input输入框进行数据绑定及验证的过程。通过同事的帮助，作者解决了数据类型格式的问题，实现了根据table列数循环创建input框，并确保每个输入框的值独立且不重复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有一个需求，在table中添加一组数据，table的行中增加一组input框并进行校验

自己钻了一个牛角尖，没搞清楚数据类型格式，最后在同事的帮助下，写出了该表格，记录下来备用~

页面布局：

将input根据el-table的lable的个数进行循环，input双向绑定的值以索引值为参数 scope.row[index] 可以使值独立不重复（在这里走了好多坑~没想到怎么设置父元素的数据格式）

<el-form label-width = "85px" :model = "addData" :rules = "rules" ref = "addData">
    <el-table :data = "addData.paramslist" id = "noData">
              <el-table-column :label = "item" v-for = "(item,index) in paramsName" :key = "index">
                <template slot-scope = "scope">
                  <el-form-item
                    class = "noML"
                    :key = "scope.row.key"
                    :prop = "'paramslist.' + scope.$index + '.'+index"
                    :rules = "{required: true, message: '值不能为空', trigger: 'blur'}">
                    <el-input size = "mini" v-model = "scope.row[index]"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
</el-form>

data数据定义的格式

addData: {
          paramsName: ['第一组', '第二组'],
          paramslist: [['']],
        },

点击添加一组数据

addParams () {
        let newArr = [], id = '', params = [], paramsListArr = []
         params = this.paramsName
         paramsListArr = this.addData.paramslist
        for (let i = 0; i < params.length; i++) {
          newArr.push(id)
        }
        paramsListArr.push(newArr)
      },