ElementUI el-table动态增减行，通过el-from实现el-table行内输入验证

原创已于 2025-02-10 17:18:48 修改 · 2k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2023-10-26 10:50:41 首次发布

前端开发同时被 3 个专栏收录

33 篇文章

订阅专栏

13 篇文章

订阅专栏

element-ui

7 篇文章

订阅专栏

文章介绍了在Vue的el-form组件中如何对一重、二重乃至多层数组进行校验，包括prop和rules的赋值方法，提供了代码示例和图片展示。

个人博客（vue3 + nodejs + mysql + 腾讯云[99元/年便宜货]服务器 + 宝塔可视化面板纯手戳产物）http://snows-l.site

el-form对二维数组校验请先参考另外一个文章，有二重数组以及多重数组校验的详解

el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）_snows_l的博客-优快云博客https://blog.youkuaiyun.com/snows_l/article/details/128994653?spm=1001.2014.3001.5501

由于有点忙，直接上效果/代码：

一、效果图如下：

图一：初始页面

图二：校验的效果

图三：更完整的图示

二、实例代码如下（完成vue文件）

<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2023-10-26 09:31:18
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2023-10-30 10:58:43
 * @FilePath: /vue2-classics-case/src/views/FormInTable/index.vue
-->
<template>
  <div class="container-warp">
    <div class="top-box">
      <el-button style type="primary" size="small" @click="handleAddRow">添加行</el-button>
    </div>
    <div class="table-warp">
      <el-form :model="form" ref="form" :rules="rules" label-width="0px" :inline="false" size="small">
        <el-table :data="form.list" border stripe>
          <el-table-column align="center" label="姓名" prop="name">
            <template slot-scope="{ $index, row }">
              <el-form-item :prop="'list[' + $index + '].name'" :rules="rules.name">
                <el-input v-model="row.name" placeholder="请输入姓名" clearable></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="性别" prop="sex">
            <template slot-scope="{ $index, row }">
              <el-form-item :prop="'list[' + $index + '].sex'" :rules="rules.sex">
                <el-select v-model="row.sex" placeholder="请选择性别" clearable>
                  <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="身高" prop="height">
            <template slot-scope="{ $index, row }">
              <el-form-item :prop="'list[' + $index + '].height'" :rules="rules.height">
                <el-input v-model="row.height" placeholder="请输入身高" clearable></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="工资" prop="money">
            <template slot-scope="{ $index, row }">
              <el-form-item :prop="'list[' + $index + '].money'" :rules="rules.money">
                <el-select v-model="row.money" placeholder="请选择工资阶段" clearable>
                  <el-option v-for="item in moneyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" prop="money">
            <template slot-scope="{ $index, row }">
              <el-button type="danger" plain size="small" @click="handleDelRow($index, row)">删 除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-form-item label="" size="small" style="margin: 20px; display: flex; justify-content: flex-end">
          <el-button type="primary" size="small" @click="handleSubmit">提 交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormInTable',
  data() {
    return {
      form: {
        list: []
      },
      sexList: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
        { label: '未公开', value: 3 }
      ],
      moneyList: [
        { label: '1000-3000', value: 1 },
        { label: '3001-5000', value: 2 },
        { label: '5001-10000', value: 3 },
        { label: '10001-2000', value: 4 },
        { label: '> 2000', value: 5 }
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        height: [{ required: true, message: '请输入身高', trigger: 'blur' }],
        money: [{ required: true, message: '请选择工资阶段', trigger: 'change' }]
      }
    };
  },

  methods: {
    handleAddRow() {
      this.form.list.push({
        name: '',
        sex: '',
        height: '',
        money: ''
      });
    },

    handleDelRow(i, row) {
      this.$confirm('确实删除吗？', '删除提示！', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.form.list.splice(i, 1);
          this.$message.success('已删除！');
        })
        .catch(() => {
          this.$message.info('已取消！');
        });
    },

    handleSubmit() {
      if (this.form.list.length) {
        this.$refs['form'].validate(valid => {
          if (valid) {
            console.log('-------- this.Form.list --------', this.Form.list);
          } else {
            this.$message.error('请检查是否有没有完善的数据');
          }
        });
      } else {
        return;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container-warp {
  width: 100%;
  height: 100%;
  padding: 20px;
  .top-box {
    margin-bottom: 20px;
  }
  .table-warp {
    /deep/ .el-form-item {
      margin-bottom: 0px;
    }
  }
}
</style>