Elementui的table行内表格属性编辑

效果图

第一步

   <el-table-column label="显示名" align="center" prop="displayName">
              <template slot-scope="scope">
                <span>{{ scope.row.displayName }}</span>
                <el-button
                  type="text"
                  icon="el-icon-edit-outline"
                  @click="modifynum(scope.row, scope.$index)"
                ></el-button>
              </template>
            </el-table-column>

如果想要在你的表格上实现行内可编辑，得加上template标签

第二步 给按钮事件写方法

 modifynum (val, indexs) {
      let that = this
      this.$prompt('修改显示名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.$message({
            type: 'success',
            message: '修改成功！'
          });
          val.displayName = value;
          that.$set(that.libraryPushList, indexs, val);
          that.tabKey++
        })
    },

在方法中使用elementui的提示框输入数据，通过$set把数据实时刷新进去，到了这里就到了我的踩坑的地方了，无论怎么修改加了nextTick都无法实时修改数据。

这个地方，给table绑定一个key值,然后每次修改key值++,这样就能实时刷新表单数据回显了。