vue Element el-table表格行编辑实践

日常开发中遇到的问题，简单记录一下，希望能给有需要的同学一点帮助和思路，直接贴代码：

1、html代码

 <el-table
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              stripe
              style="width: 100%"
              @current-change="handleCurrentChange"
            >
              <el-table-column label="编号" type="index" min-width="15%" header-align="center" align="center"/>
              <el-table-column property="envName" label="环境" min-width="25%" header-align="center" align="center"/>
              <el-table-column property="code" label="描述符" min-width="25%" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" v-model="scope.row.tagCode" size="small"
                            placeholder="输入描数符..."></el-input>
                  <span v-else>{{scope.row.tagCode}}</span>
                </template>
              </el-table-column>
              <el-table-column property="value" label="值" min-width="25%" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" v-model="scope.row.etVal" size="small"
                            placeholder="输入值..."></el-input>
                  <span v-else>{{scope.row.etVal}}</span>
                </template>
              </el-table-column>
              <el-table-column property="desc" label="描述符详情" min-width="35%" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" v-model="scope.row.tagDesc" size="small"
                            placeholder="输入描述符详情"></el-input>
                  <span v-else>{{scope.row.tagDesc}}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button v-if="!scope.row.edit" @click="handleEdit(scope.row)" type="text" size="small">编辑
                  </el-button>
                  <el-button v-if="scope.row.edit" @click="handleEdit(scope.row)" type="text" style="color: #E6A23C"
                             size="small">保存
                  </el-button>
                  <el-button v-if="scope.row.edit" @click="handleCancel(scope.row)" type="text" size="small">取消
                  </el-button>
                  <!--<el-button v-if="!scope.row.edit" @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>-->
                </template>
              </el-table-column>
            </el-table>

2、js代码：

 handleEdit(row) {
        if (row.edit) {
          // input验证
          if (row.envId == null || row.tagCode == null || row.etVal == null) {
            return;
          }
          etSaveAll(this, {
            'envId': row.envId,
            'tagId': row.tagId,
            'tagCode': row.tagCode,
            'etVal': row.etVal,
            'tagDesc': row.tagDesc
          }).then((response) => {
            if (response.body.code === 200) {
              this.$message({
                message: '保存成功！',
                showClose: true,
                type: 'success'
              })
              if (row.tagId == null) {
                row.tagId = response.body.data.tagId
              }
              row.edit = !row.edit
            } else if (response.body.code === 403) {
              this.$store.dispatch('user/logout')
              this.$router.push(`/login?redirect=${this.$route.fullPath}`)
            } else {
              this.$message({
                message: response.body.message,
                showClose: true,
                type: 'error'
              })
            }
          }).catch((e) => {
            this.$message({
              message: e.body.message,
              showClose: true,
              type: 'error'
            })
          })
        } else {
          const temp = Object.assign({}, row)
          this.rowData = temp
          row.edit = !row.edit
        }
      },
      //取消编辑
      handleCancel(row) {
        if (row.isAddRow) {
          this.tableData.splice(this.tableData.length - 1, 1)
        } else {
          for (let key in this.rowData) {
            row[key] = this.rowData[key]
          }
          row.edit = false
        }
      },
      //添加描述符行
      handleAddRow() {
        if (this.tableData == null) {
          this.tableData = []
        }
        this.tableData.push({
          isAddRow: true,
          tagCode: null,
          tagDesc: null,
          envId: this.form.environment,
          tagId: null,
          etVal: null,
          edit: true
        })
      }