element-ui 表格实现单元格可编辑的示例

<template>

  <el-table
    :data="tableData"
    border
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseOut"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template scope="scope">
      <span v-if="!scope.row.editeFlag">{{ scope.row.name }}</span>
      <span v-if="scope.row.editeFlag" class="cell-edit-input"><el-input v-model="scope.row.name" placeholder="请输入内容"></el-input></span>
      <span v-if="!scope.row.editeFlag" style="margin-left:10px;" class="cell-icon"  @click="handleEdit(scope.$index,scope.row)">  <i class="el-icon-edit"></i> </span>
      <span v-if="scope.row.editeFlag"  style="margin-left:10px;"  class="cell-icon"  @click="handleSave(scope.$index,scope.row)">  <i class="el-icon-document"></i> </span>
      </template>
    </el-table-column>
  </el-table>

 

 

</template>

 

<script>

export default{

 

 

  data(){

    return {

       tableData:[
    {
name:"test",
 editeFlag:false
    },
   {
      name:"test",
      editeFlag:false
    },
   {
     name:"test",
     editeFlag:false
    },
    {
name:"test",
editeFlag:false
},
    ], 

      inputColumn1:""//第一列的输入框

    }

  },

  methods:{

     handleEdit:function(index,row){
        //遍历数组改变editeFlag
        console.log(row)
        console.log(index);
        this.tableData[index].editeFlag=true;


    },
    handleSave:function(index,row){
        //保存数据，向后台取数据
         this.tableData[index].editeFlag=false;
    },
    handleMouseEnter:function(row, column, cell, event){


      cell.children[0].children[1].style.color="black";
    },
    handleMouseOut:function(row, column, cell, event){


      cell.children[0].children[1].style.color="#ffffff";
    }

  }

}

 

</script>

 

<style>

.cell-edit-input .el-input, .el-input__inner {

  width:100px;

}

.cell-icon{

  cursor:pointer;

  color:#fff;

}

</style>