form

Multiple form validation

Use promise for validation, with the following HTML code

  <el-form :model="formF[0]" ref="ruleForm1"></el-form>
  <el-form :model="formF[1]" ref="ruleForm2"></el-form>
Copy the code

The js code is as follows

  const p1 = new Promise((resolve, reject) => {
    this.$refs["ruleForm1"].validate(valid => {
      if(valid) { resolve(); }}); }); const p2 = new Promise((resolve, reject) => { this.$refs["ruleForm2"].validate(valid => {
      if(valid) { resolve(); }}); }); Promise.all([p1, p2]).then(function() {
    console.log("Form validation succeeded");
  });
Copy the code

If the form is large, you can use a for loop for validation

let formList = [];

for (let i = 1; i <= 4; i++) {
    let validItem = new Promise((resolve, reject) => {
      this.$refs["ruleForm" + i].validate(valid => {
        if(valid) { resolve(); }}); }); formList.push(validItem); } Promise.all(formList).then(function() {
    console.log("Form validation succeeded");
});
Copy the code

table

Table editable

Double – click the table line, table can be edited, click other lines to save the function. The effect is as follows (pink is GIF recording software problem)

<el-table
   :data="conceptTableData"
   style="width: 100%"
   :row-class-name="tableRowClassName"
   @row-click="saveTableData"
   @row-dblclick="handdleRow"
>
   <el-table-column prop="difficult" label="Major difficulty" width="180">
     <template slot-scope="scope">
       <el-input v-model="scope.row.difficult" v-show="scope.row.index == currentRowIndex"></el-input>
       <span v-show="scope.row.index ! = currentRowIndex">{{scope.row.difficult}}</span>
     </template>
   </el-table-column>
</el-table>
Copy the code

The js code is as follows

@params{row} @params{rowIndx} @params{rowIndx} @params{rowIndx} @params{rowIndx} @params{rowIndx} rowIndex }) { row.index = rowIndex; }, /** * set the current column to be selected, temporarily store the row data * @params{row} row for each row */ handdleRow(row) {this.currentrowindex = row.index; this.currentRow = row; }, /** * save data */ saveTableData(row) {// Do not save if action edit row is clickedif (row.index == this.currentRowIndex) return false;
  // saveData
}
Copy the code