el-table 单行编辑保存

 <el-table-column align="center" prop="address" label="操作" width="120px" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-link @click="edit(scope.row, scope.$index)" :underline="false" type="primary">{{scope.row.edit}}
            </el-link>
          </template>
        </el-table-column>

 

 // 获取列表
    list() {
      // 前端给表格数据添加编辑字段
      this.tableListData = this.tableListData.map(item => {
        return Object.assign(item, { edit: '编辑' })
      })

    },

 // 编辑和保存
    edit(row, index) {
      if (row.edit == '编辑') {
        this.$set(this.tableListData, index, { ...row, edit: '保存' })
      } else if (row.edit == '保存') {
        this.$set(this.tableListData, index, { ...row, edit: '编辑' })
      }
    },