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
