vue element table 表头添加图标

  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?'启动':'禁用' }}</span>
 25       </template>
 26     </el-table-column>
 27   </el-table>
 28 
 29  
 30 </template>
 31 
 32 <script>
 33 import Vue from 'vue'
 34 export default{
 35 
 36 
 37   data(){
 38     return {
 39        tableData:[], 
 40       inputColumn1:""//第一列的输入框
 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失去焦点
 70     onblur(index,row){
 71         this.tableData[index].editeFlag=false;
 72         Vue.set(this.tableData,index,this.tableData[index]);
 73   },
 74   // render 事件
 75   renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看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