vue element table 表头添加图标

1  1 <template>
2  2   <el-table
3  3     :data="tableData"
4  4     border
5  5     @cell-mouse-enter="handleMouseEnter"
6  6     @cell-mouse-leave="handleMouseOut"
7  7     style="width: 100%">
8  8     <el-table-column
9  9       label="日期"
10 10       width="180" :render-header="renderHeader"> <!-- // 加入render事件 -->
11 11       <template slot-scope="scope">
12 12       <span v-if="!scope.row.editeFlag">{{ scope.row.name }}</span>
13 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 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 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 16       </template>
17 17     </el-table-column>
18 18     <el-table-column
19 19       label="状态"
20 20       width="180"> <!-- // 加入render事件 -->
21 21       <template slot-scope="scope">
22 22         <i v-if="scope.row.editeFlag==1" style="color:blue" class="el-icon-caret-right"></i>
23 23         <i v-else class="el-icon-caret-right"></i>
24 24         <span>{{ scope.row.editeFlag==1?'启动':'禁用' }}</span>
25 25       </template>
26 26     </el-table-column>
27 27   </el-table>
28 28 
29 29  
30 30 </template>
31 31 
32 32 <script>
33 33 import Vue from 'vue'
34 34 export default{
35 35 
36 36 
37 37   data(){
38 38     return {
39 39        tableData:[], 
40 40       inputColumn1:""//第一列的输入框
41 41     }
42 42   },
43 43   created(){
44 44       for(var index=0;index<10;index++){
45 45           this.tableData[index]={name:"test",editeFlag:0};
46 46     }
47 47     this.tableData[0]={name:"test",editeFlag:1};
48 48   },
49 49   methods:{
50 50      handleEdit:function(index,row){
51 51         this.tableData[index].editeFlag=true;
52 52         Vue.set(this.tableData,index,this.tableData[index]);
53 53     },
54 54     handleSave:function(index,row){
55 55         //保存数据，向后台取数据
56 56             this.tableData[index].editeFlag=false;
57 57     },
58 58     handleMouseEnter:function(row, column, cell, event){
59 59     if(column.label=="日期"){
60 60       cell.children[0].children[1].style.color="black";
61 61     }
62 62     },
63 63     handleMouseOut:function(row, column, cell, event){
64 64     if(column.label=="日期"){
65 65       cell.children[0].children[1].style.color="#ffffff";
66 66     }
67 67         
68 68     },
69 69     //input失去焦点
70 70     onblur(index,row){
71 71         this.tableData[index].editeFlag=false;
72 72         Vue.set(this.tableData,index,this.tableData[index]);
73 73   },
74 74   // render 事件
75 75   renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
76 76     return h(
77 77       'div',
78 78       [ 
79 79         h('span', column.label),
80 80         h('i', {
81 81           class:'el-icon-location',
82 82           style:'color:#409eff;margin-left:5px;'
83 83         })
84 84       ],
85 85     );
86 86   }
87 87   }
88 88 }
89 89 
90 90 </script>
91 91 
92 92 <style>
93 93 .cell-edit-input .el-input, .el-input__inner {
94 94   width:100px;
95 95 }
96 96 .cell-icon{
97 97   cursor:pointer;
98 98   color:#fff;
99 99 }
100100 </style>

View Code