ElementUI编辑行

对Vue+ElementUi项目中Table 表格行的编辑
1、首先看效果图：

详解：点击编辑按钮，对应的编辑行出现iuput框,可进行行内编辑

2、使用v-if进行判断

<el-table-column prop="orgName" label="组织名称">
        <template scope="scope">
          <div v-if="scope.row.id == currentData.id">
            <el-input
              v-model="currentData.content"
              class="edit-input"
              size="small"
              @keyup.enter.native="orgNameEdit(scope.row)"
            />

            <el-button
              type="warning"
              circle
              size="small"
              class="cancel-btn"
              icon="el-icon-refresh"
              @click="cancelEdit(scope.row)"
            >
            </el-button>
          </div>
          <span v-else>{{ scope.row.orgName }}</span>
        </template>
      </el-table-column>

3、在data中定义该对象

currentData: { content: "", index: "", id: "" },

4、对currentData进行赋值

// 显示input框
    handleEdit(obj, index) {
      this.currentData = { content: obj.orgName, index: index, id: obj.id };
      this.$forceUpdate();
    },

5、取消按钮的功能

// 取消-还原
    cancelEdit() {
      this.currentData = { content: "", index: "", id: "" };
    },

6、对于值的保存，根据需求使用的是回车事件，各位也可以对编辑按钮进行判断
注意：当修改完成后，记得调用一次重新获取页面内容的函数，也要获取一次取消按钮的功能