table dynamic form record in elementUI

form is used together with table

I always thought that the form was used alone, but now I found that it was just covered with a shell, and it was not a very troublesome thing.

standalone use of 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>

Union of form and table

Use solot in the column of the table to put the form-item. What needs to be paid attention to is the data format and rules.

The input input box is used in the form, and the value it binds is the attribute of the current row of data. The original writing method is to use form.xxx to bind the form after the form is bound to the form. Now using table, the binding value becomes scope.row.xxx.

Because what I am writing is to dynamically add table data, the prop uses index splicing.

<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>

Data Format

form{
    tableData:[],
    rules:{}
   }

index in el-table

Table-column Attributes

parameter	illustrate	type	Optional value	default value
type	corresponds to the column type. If selection is set, the multi-select box is displayed; if index is set, the index of the row (calculated from 1) is displayed; if  is set expand is displayed as an expandable button	string	selection/index/expand	—
index	If type=index is set, you can customize the index by passing the index attribute	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;
    },

Table data can be added or deleted

When clicking on the current row, a new piece of data will be added after the current row. Clicking on the current row will delete the current row. Clicking on the current row will add a row at the end.

 // 增加一行
    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);
        
      });
    },

form validation

Form verification is the same as the original method. You need to write the rules in the form.

 <el-form-item
                :prop="'tableData.' + scope.$index + '.select'"
                :rules="form.rules.select"
              >

Because the form will be dynamically added later, prop adopts the method of splicing index, and rules needs to write all attributes.

But there is a problem. After clicking, a new form is generated, for example, the index is 3,4,5. After clicking verification, there is an error message in form 3. If you delete data 3 directly, the verification of data 4 will show the error message of the original data No. 3. No revalidation will be done.

The method I use here is to verify all the filled-in data when adding. Only after the verification is successful can the new addition be made. When deleting the row data, delete it directly. The error message has also been deleted without affecting the data display.

If there is a better way, please remind me. I didn't use the new addition of el-table. It’s still a troublesome way to write