el-table嵌入输入框

一、vue+Element 实现table表格可编辑（select下拉框 input输入框）

1、聚焦在当前行的时候，可以进行文本的编辑，或者下拉框的选择，主要用到 highlight-current-row 这个样式

2、借助template组件进行编辑

<el-table :data="columnData" style="width: 100%;margin-top: 20px" highlight-current-row
  @row-click="handleCellChange">
  <el-table-column prop="columnName" label="字段">
    <template scope="scope">
      <el-input size="small" v-model="scope.row.columnName" placeholder="请输入内容"
        @change="handleCellEdit(scope.$index, scope.row)"></el-input>
    </template>
  </el-table-column>

  <el-table-column prop="isSensitive" label="敏感字段" width="120">
    <template scope="scope">
      <el-select v-model="scope.row.isSensitive" @change="handleCellEdit(scope.$index, scope.row)">
        <el-option v-for="item in sensitiveOptions" :key="item.value" :label="item.label" 				 :value="item.value">
        </el-option>
      </el-select>
    </template>
  </el-table-column>

  <el-table-column fixed="right" label="操作" width="100">
    <template slot-scope="scope">
      <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, columnData)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

handleCellChange(row, event, column) {
  console.log("row=" + row)
  console.log("event=" + event)
  console.log("column=" + column
},
handleCellEdit(index, row) {
  console.log(index, row);
},
deleteRow(index, rows) {
  rows.splice(index, 1);
},

二、vue elementUI el-table 表格双击可编辑

<template>
//表格也可以写成原生的table
<el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
       <el-table-column property="order1" label="顺序"></el-table-column>
       <el-table-column property="order2" label="装车点">
           <template slot-scope="scope">
               <el-input v-model="scope.row.order2" placeholder="请输入内容"></el-input>
           </template>
       </el-table-column>
</el-table> 
</template>

<script>
export default{
    data(){
        return{}
    },
    methods:{
    	tableDbEdit(row, column, cell, event) {
          console.log(row, column, cell, event);
          if (column.label != "顺序") {
            event.target.innerHTML = "";
            let cellInput = document.createElement("input");
            cellInput.value = "";
            cellInput.setAttribute("type", "text");
            cellInput.style.width = "80%";
            cell.appendChild(cellInput);
            cellInput.onblur = function() {
              cell.removeChild(cellInput);
              event.target.innerHTML = cellInput.value;
            };
        }
     }
    }
}
</script>