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
}
复制代码