element-ui 的 el-table，點擊單元格可編輯

<template>
 <div id="ailse_box">
  <div>
   <el-table
    style="width: 100%;"
    :row-key="get_row_key"
    @cell-click="cell_click"
    :row-class-name="table_row_class_name"
    :data="tableData
   >
    <el-table-column type="selection" align="center" :reserve-selection="true"> </el-table-column>
    <el-table-column label="通道ID" align="center">
     <template slot-scope="scope">
      <div
       class="cell_btn"
       v-if="scope.row.index === cell_click_index && cell_click_label === '通道ID'"
      >
       <el-input
        size="mini"
        maxlength="300"
        placeholder="請輸入通道ID"
        v-model="scope.row.taskid"
       />
       <el-button
        type="primary"
        size="mini"
        icon="el-icon-edit"
        circle
        @click="determine_modify(scope.row)"
       ></el-button>
       <el-button
        type="warning"
        size="mini"
        icon="el-icon-close"
        circle
        @click="cancel('cancel_edit')"
       ></el-button>
      </div>
      <span v-else>{{ scope.row.taskid }}</span>
     </template>
    </el-table-column>
    <el-table-column align="center" label="通道名稱">
     <template slot-scope="scope">
      <div
       class="cell_btn"
       v-if="scope.row.index === cell_click_index && cell_click_label === '通道名稱'"
      >
       <el-input
        size="mini"
        maxlength="300"
        placeholder="請輸入通道名稱"
        v-model="scope.row.taskname"
       />
       <el-button
        type="primary"
        size="mini"
        icon="el-icon-edit"
        circle
        @click="determine_modify(scope.row)"
       ></el-button>
       <el-button
        type="warning"
        size="mini"
        icon="el-icon-close"
        circle
        @click="cancel('cancel_edit')"
       ></el-button>
      </div>
      <span v-else>{{ scope.row.taskname }}</span>
     </template>
    </el-table-column>
    <el-table-column align="center" label="分析地址">
     <template slot-scope="scope">
      <div
       class="cell_btn"
       v-if="scope.row.index === cell_click_index && cell_click_label === '分析地址'"
      >
       <el-input
        size="mini"
        maxlength="300"
        placeholder="請輸入分析地址"
        v-model="scope.row.address"
       />
       <el-button
        type="primary"
        size="mini"
        icon="el-icon-edit"
        circle
        @click="determine_modify(scope.row)"
       ></el-button>
       <el-button
        type="warning"
        size="mini"
        icon="el-icon-close"
        circle
        @click="cancel('cancel_edit')"
       ></el-button>
      </div>
      <span v-else>{{ scope.row.address }}</span>
     </template>
    </el-table-column>
    <el-table-column align="center" label="序號">
     <template slot-scope="scope">
      <div
       class="cell_btn"
       v-if="scope.row.index === cell_click_index && cell_click_label === '序號'"
      >
       <el-input size="mini" maxlength="300" placeholder="請輸入序號" v-model="scope.row.no" />
       <el-button
        type="primary"
        size="mini"
        icon="el-icon-edit"
        circle
        @click="determine_modify(scope.row)"
       ></el-button>
       <el-button
        type="warning"
        size="mini"
        icon="el-icon-close"
        circle
        @click="cancel('cancel_edit')"
       ></el-button>
      </div>
      <span v-else>{{ scope.row.no }}</span>
     </template>
    </el-table-column>
   </el-table>
  </div>
 </div>
</template>

<script>
export default {
 data() {
  return {
   tableData: [], // 表格數據
   cell_click_index: null, // 點擊的單元格
   cell_click_label: '', // 當前點擊的列名
  }
 },
 methods: {
  // 把每一行的索引放進row
  table_row_class_name({ row, rowIndex }) {
   row.index = rowIndex
  },
  // 單元格點擊事件
  cell_click(row, column, cell, event) {
   this.cell_click_index = row.index
   this.cell_click_label = column.label
   switch (column.label) {
    case 'taskid':
     this.cell_click_index = row.index
     this.cell_click_label = column.label
     break
    case 'taskname':
     this.cell_click_index = row.index
     this.cell_click_label = column.label
     break
    default:
     return
   }
  },
  // 確定修改
  determine_modify(row) {
   console.log(row)
  },
 },
  // 點擊取消
  cancel(status) {
   switch (status) {
    case 'cancel_edit':
     this.cell_click_index = null
     this.cell_click_label = ''
     break
    default:
     break
   }
  },
}
</script>