Demand background

Ladies and gentlemen, I don’t know if you have any requirements for various operations and specification verification in detailed tables in your daily work, as shown below:

The effect is as follows:

The difficulties in

Because the table is an addable row, and the corresponding fields of each piece of data are the same in the table, and the key of the data must be unique and object in the form validation. The data format of these two data is different, I think, as long as the mapping relationship is solved, the problem will be solved. So I came up with the following method

The solution

The project adopts Vue + Element UI development: The current scheme I use is to add a layer of EL-Form to el-Table, and then declare tableForm to bind form data, including some form validation, declare tableData to represent table data, and render it for summing up and data initialization, etc. Template code is as follows:

<el-form :rules="rules" :model="tableForm" ref='tableForm' size="small"<div class='btn-row'> <el-button type='primary' size="mini" @click="addRow"> @click="deleteRow"> delete </el-button> </div> <el-table :data="tableData" show-summary @selection-change="handleSelectionChange" ref="table" :summary-method="getSummaries"> <el-table-column prop="startDate" <template slot-scope="scope"> <el-form-item :prop='"startDate" + scope.row.id' :rules="rules.startDate" class="form-item__margin"> <el-date-picker v-model="tableForm['startDate' + scope.row.id]" @input="changeValue('startDate', scope.$index, Scope.row. id)" type="date" value-format=" YYYY-MM-DD "placeholder=" date" > </el-date-picker> </el-form-item> </template> </el-table-column> </el-table> </el-form>Copy the code

Since rows can be added and deleted from the form, and the actions are not in each row, there needs to be an identifier, and there is no available ID in the data, so HERE I do the following:

 / / initialization
init () {
  const id = +moment()
  constdata = {... this.initData}for (let [key, value] of Object.entries(this.initData)) {
    this.$set(this.tableForm, `${key}${id}`, value)
  }
  data.id = id
  this.tableData.push(data)
}
Copy the code

So the initialization is done by adding the ID and expanding and tiling the initialization field into the tableForm object, and adding rows is essentially the same as init, which is adding an identifier and expanding, and deleting is a little bit different, but it’s pretty easy

// Delete the selected rowdeleteRow () {
  const {checkedRow, tableData} = this
  if(! checkedRow.length) { this.$message({message: 'no check',type: 'warning'
    })
    return
  }
  const ids = []
  checkedRow.forEach(item => {
    ids.push(item.id)
  })
  const newTable = tableData.filter(item => {
    return! ids.includes(item.id) }) this.tableData = newTablefor (let [key, value] of Object.entries(this.tableForm)) {
    for (let id of ids) {
      if (key.includes(id)) {
        delete this.tableForm[key]
      }
    }
  }
},
Copy the code

Notice what I’m doing in the template,

`<el-form-item :prop='"startDate" + scope.row.id' :rules="rules.startDate"> ... 'and' < Component V-model ="tableForm['startDate' + scope.row.id]" @input="changeValue('startDate', scope.$index, scope.row.id)"> ... `Copy the code

conclusion

Ok, so far, this requirement has been solved. I don’t know if there are any friends who have a better solution. Welcome your advice.