vue element table header to add an icon

  1 <template>
  2   <el-table
  3     :data="tableData"
  4     border
  5     @cell-mouse-enter="handleMouseEnter"
  6     @cell-mouse-leave="handleMouseOut"
  7     style="width: 100%">
  8     <el-table-column
  9       label="日期"
 10       width="180" :render-header="renderHeader"> <!-- // 加入render事件 -->
 11       <template slot-scope="scope">
 12       <span v-if="!scope.row.editeFlag">{{ scope.row.name }}</span>
 13       <span v-if="scope.row.editeFlag" class="cell-edit-input"><el-input @blur="onblur(scope.$index,scope.row)" v-model="scope.row.name" placeholder="请输入内容"></el-input></span>
 14       <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>
 15       <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>
 16       </template>
 17     </el-table-column>
 18     <el-table-column
 19       label="状态"
 20       width="180"> <!-- // 加入render事件 -->
 21       <template slot-scope="scope">
 22         <i v-if="scope.row.editeFlag==1" style="color:blue" class="el-icon-caret-right"></i>
 23         <i v-else class="el-icon-caret-right"></i>
 24         <span>{{ scope.? row.editeFlag == 1 'Start': 'Disable'}} </span > 
25        </ Template > 
26 is      </ EL-Table-column > 
27    </ EL-Table > 
28  
29   
30  </ Template > 
31 is  
32  < Script > 
33 is  Import Vue from ' VUE ' 
34 is  Export default {
 35  
36  
37 [    Data () {
 38 is      return {
 39         TableData: [], 
 40        inputColumn1: "" // input box in the first column 
41     }
 42   },
 43   created(){
 44       for(var index=0;index<10;index++){
 45           this.tableData[index]={name:"test",editeFlag:0};
 46     }
 47     this.tableData[0]={name:"test",editeFlag:1};
 48   },
 49   methods:{
 50      handleEdit:function(index,row){
 51         this.tableData[index].editeFlag=true;
 52         Vue.set(this.tableData,index,this.tableData[index]);
 53     },
 54     handleSave:function(index,row){
 55         //保存数据，向后台取数据
 56             this.tableData[index].editeFlag=false;
 57     },
 58     handleMouseEnter:function(row, column, cell, event){
 59     if(column.label=="日期"){
 60       cell.children[0].children[1].style.color="black";
 61     }
 62     },
 63     handleMouseOut:function(row, column, cell, event){
 64     if(column.label=="日期"){
 65       cell.children[0].children[1].style.color="#ffffff";
 66     }
 67         
 68     },
 69      // INPUT lost focus 
70      the onblur (index, Row) {
 71 is          the this .tableData [index] .editeFlag = to false ;
 72          Vue.set ( the this .tableData, index, the this .tableData [index]);
 73 is    },
 74    // the render event 
75    renderHeader (H, column} {) { // H is the abbreviated cerateElement, in particular to see official documents vue 
76      return H (
 77        ' div ' ,
 78        [ 
 79          H ( ' span ', column.label),
 80         h('i', {
 81           class:'el-icon-location',
 82           style:'color:#409eff;margin-left:5px;'
 83         })
 84       ],
 85     );
 86   }
 87   }
 88 }
 89 
 90 </script>
 91 
 92 <style>
 93 .cell-edit-input .el-input, .el-input__inner {
 94   width:100px;
 95 }
 96 .cell-icon{
 97   cursor:pointer;
 98   color:#fff;
 99 }
100 </style>

View Code