form表单与table一起使用
之前一直以为form表单是单独使用，现在联动起来发现只是套了一层外壳，并不是很麻烦的事情
form的单独使用
<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拼接的方式
<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>数据格式
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) | - |
<el-table-column
label="序号"
align="center"
type="index"
width="70px"
:index="indexMethod"
sortable
/> // 将数字转换为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;
},
可增删表格数据
点击当前行时候在当前行后面新增一条数据，点击当前行删除当前行，点击在最后添加一行
// 增加一行
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表单中
<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的新增。还是比较麻烦的写法文章来源：https://www.toymoban.com/news/detail-695307.html
文章来源地址https://www.toymoban.com/news/detail-695307.html
到了这里，关于elementUI中的table动态表单记录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
