vue element table 表头添加图标

Easter79
• 阅读 634

vue element table 表头添加图标 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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
vue+element 表格formatter数据格式化并且插入html标签
前言   vue中element框架,其中表格组件,我既要行内数据格式化,又要插入html标签一贯思维,二者不可兼得也一、element表格数据格式化  !(https://oscimg.oschina.net/oscnet/3c43a1cb3cbdeb5b5ad58acb45a42612b00.p
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
KaliTools说明书+BurpSuit实战指南+SQL注入知识库+国外渗透报告
!(https://oscimg.oschina.net/oscnet/d1c876a571bb41a7942dd9752f68632e.gif"15254461546.gif")0X00KaliLinux Tools中文说明书!(https://oscimg.oschina.net/oscnet/
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k