element ：form多表單驗證 table可編輯

form

多個表單驗證

使用promise進行驗證，html代碼以下

<el-form :model="formF[0]" ref="ruleForm1"></el-form>
  <el-form :model="formF[1]" ref="ruleForm2"></el-form>
複製代碼

js代碼以下

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("表單驗證成功");
  });
複製代碼

若是 表單不少，能夠使用for循環的形式進行遍歷驗證

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("表單驗證成功");
});
複製代碼

table

表格可編輯

雙擊表格一行，實現表格可編輯,點擊其餘行進行保存功能。效果以下（粉色爲gif錄製軟件問題）

經過element自帶的row-click、row-dblclick設置點擊事件,經過currentRowIndex判斷是否爲選中行 由於上述的兩個事件沒有行下標，須要經過row-class-name手動設置

<el-table
   :data="conceptTableData"
   style="width: 100%"
   :row-class-name="tableRowClassName"
   @row-click="saveTableData"
   @row-dblclick="handdleRow"
>
   <el-table-column prop="difficult" label="主要困難" 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>
複製代碼

js代碼以下

/**
 * 將每一行的索引放到row中
 * @params{ row } 每一行數據
 * @params{ rowIndx } 每一行的索引
 */
tableRowClassName({ row, rowIndex }) {
  row.index = rowIndex;
},

/**
 * 設置當前列被選中，將本行數據臨時存儲
 * @params{ row } row爲每一行數據
 */
handdleRow(row) {
  this.currentRowIndex = row.index;
  this.currentRow = row;
},

/**
 * 保存數據
 */
saveTableData(row) {
// 若是點擊行爲編輯行則不保存
  if (row.index == this.currentRowIndex) return false;
  // saveData
}
複製代碼