element-ui的table表中数据可编辑

先看效果

html结构代码

<el-table :data="tableData" highlight-current-row border :height='tableHeight'>
  <el-table-column prop="info.url" label="通道名称" align="center" class="compileNameFather" width="230">
    <template slot-scope="scope">
      <div class='headerFirst'>
        {{scope.row.info.url}}<i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)"></i>
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="number" label="实时人数"  align="center"></el-table-column>
  <el-table-column prop="lastAnalyze" label="最后分析时间" align="center" :formatter="formatTime"></el-table-column>
  <el-table-column label="人员白名单"  align="center">
    <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    </template>
  </el-table-column>
  <el-table-column prop="status" label="状态" align="center">
    <template slot-scope="scope">
        <span v-if="scope.row.info.url">在线</span>
        <span v-else class="colorStatus">预备</span>
    </template>
  </el-table-column>
</el-table>

vue中table是常用的，很多时候为了方便偷懒用table，但可能朋友们就会遇到我这种情况（可编辑），

实现的方法有：

1. 原生方法
2. 组件切换的方法

我个人选择第一种简单low的方法（动态生成el-input、button）。
js代码
基本上就是动态生成赋值、class、style等效果，改改就可以用。

tableDbEdit(index) {  //index为索引号
  var cellabc = document.getElementsByClassName('headerFirst')[index];
  cellabc.innerHTML = "";
  let cellInput = document.createElement("el-input");
  let cellInputSon = document.createElement("input");
  let cellBut = document.createElement("button");
  let ibtu = document.createElement("i");
  cellInputSon.value = this.tableData[index].info.url;
  cellabc.setAttribute("class","cellBoxdev");
  ibtu.setAttribute("class","el-icon-check");
  cellInputSon.setAttribute("class","el-input__inner compileName");
  cellBut.setAttribute("class","el-button el-button--warning el-button--mini");
  cellBut.innerText = '成功';
  cellInput.style.width = "100%";
  ibtu.style.marginLeft = "3px";
  cellInputSon.style.width = "60%";
  cellInputSon.style.padding = "0 5px 0 0";
  cellInputSon.style.border = "1px solid transparent";
  this.clickButSty = true;
  cellInput.appendChild(cellInputSon);
  cellabc.appendChild(cellInput);
  cellInput.appendChild(cellBut);
  cellBut.appendChild(ibtu);
  cellBut.onclick = ()=>{ //成功按钮事件
    cellabc.removeChild(cellInput);
    this.tableData[index].info.url = cellInputSon.value;
    cellabc.innerHTML = this.tableData[index].info.url;
    console.log('4',this.tableData[index])
    let ibtuIcon = document.createElement("i");
    ibtuIcon.setAttribute("class","el-icon-edit-outline eidtIcon");
    cellabc.appendChild(ibtuIcon);
    cellabc.setAttribute("class","headerFirst");
    ibtuIcon.onclick = ()=>{
        this.tableDbEdit(index);
    }
  }
}