elementUI中的table动态表单记录

form表单与table一起使用

之前一直以为form表单是单独使用,现在联动起来发现只是套了一层外壳,并不是很麻烦的事情

form的单独使用

html 复制代码
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

form与table的联合

在table的column中使用solot 将form-item放入。需要注意的还是数据格式与rules

form内使用的是input输入框,它所绑定的值当前行数据的属性 原来的写法是form表单绑定form后 使用form.xxx进行绑定。现在采用的是table,绑定值变成了scope.row.xxx.

因为我写的是动态添加表格数据,所以prop采用index拼接的方式

html 复制代码
<el-form ref="ruleForm" :model="form" :rules="form.rules">
        <el-table class="box-table" :data="form.tableData" border >
          <el-table-column label="标题" align="center">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.title'"
                :rules="form.rules.title"
              >
                <el-input
                  v-model.trim="scope.row.title"
                  size="small"
                  placeholder="请输入标题名称"
                />
              </el-form-item>
            </template>
          </el-table-column>
       </el-table>
      </el-form>

数据格式

html 复制代码
form{
    tableData:[],
    rules:{}
   }

el-table中的index

Table-column Attributes

参数 说明 类型 可选值 默认值
type 对应列的类型。如果设置了 selection 则显示多选框;如果设置了 index 则显示该行的索引(从 1 开始计算);如果设置了 expand 则显示为一个可展开的按钮 string selection/index/expand ---
index 如果设置了 type=index,可以通过传递 index 属性来自定义索引 number, Function(index) -
html 复制代码
   <el-table-column
            label="序号"
            align="center"
            type="index"
            width="70px"
            :index="indexMethod"
            sortable
          />
javascript 复制代码
 // 将数字转换为A-Z 一直到AZ-ZZ的转换方法
    indexMethod(number) {
      var ordA = "A".charCodeAt(0);
      var ordZ = "Z".charCodeAt(0);
      var len = ordZ - ordA + 1;
      var s = "";
      while (number >= 0) {
        s = String.fromCharCode((number % len) + ordA) + s;
        number = Math.floor(number / len) - 1;
      }
      return s;
    },

可增删表格数据

点击当前行时候在当前行后面新增一条数据,点击当前行删除当前行,点击在最后添加一行

javascript 复制代码
 // 增加一行
    addRow() {
      const row = {
        title: "",
      };
      this.form.tableData.push(row);
      // console.log(row);
    },
    // 删除指定行
    delRow(index) {
      this.form.tableData.splice(index, 1);
    },
    // 指定位置插入行
    addRowIndex(index) {
          const row = {
            title: "",
            this.form.tableData.splice(index + 1, 0, row);
        
      });
    },

表单校验

表单校验与原来的方式是一样的,需要将rules写在form表单中

html 复制代码
 <el-form-item
                :prop="'tableData.' + scope.$index + '.select'"
                :rules="form.rules.select"
              >

因为后续进行动态添加表单,prop采用拼接index的方式,rules需要写全属性

但是存在一个问题,点击产生新表单后,例如index为 3,4,5的。点击验证后3表单存在错误提示,直接删除数据3,数据4的验证就会出现原来3号数据的错误提示。不会进行重新验证。

这里我采用的办法是在新增时候岁所有填入数据进行验证,验证成功后才可进行新增,删除行数据是直接进行删除。将错误信息也进行了删除不回影响数据显示。

如果有更好的方式希望能够提醒我下。我这没有使用el-table的新增。还是比较麻烦的写法

相关推荐
开开心心就好34 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享35 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js