前言:
header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

Function({row, column, rowIndex, columnIndex})/Object 

在表格添加
@header-click="headerClick"
 
//点击表头事件
         headerClick(column, event){
             let prop = column.property;
             let className = column.id;
     //只取第一行,则表头
            let selectClass = document.getElementsByClassName(className)[0] ;
   //两次点击取消样式
            if( !selectClass.style.color)
              selectClass.style.color = "#10fd10";
              else
                 selectClass.style.color = null;
         },

element ui 点击选中表头并改变表头样式的更多相关文章

  1. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  2. kendo Ui实现搜索选中建议 不改变输入框的值

    $("#SubjectFilter").kendoAutoComplete({ dataTextField: "patientCardNumber", temp ...

  3. 饿了么element UI<el-dialog>弹出层</el-dialog>修改默认样式不能在<style scoped>修改

    如果在非scoped下,修改el-dialog自动添加的DIV类名的style加上important,可以覆盖原来的width,但这样会让整个项目的样式都乱套. 如果在scoped下修改style.所 ...

  4. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  5. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  6. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

  7. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  8. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  9. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  10. element ui table render-header自定义表头信息使用

    在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板,再通过props传入不同的值来渲染不同的模板.例如我们需要实现一个<v-title size='1'&g ...

随机推荐

  1. 登录他人mysql

    //登录参数:mysql -u用户名 -p密码 -h要连接的mysql服务器的ip地址(默认127.0.0.1) -P端口号(默认3306)

  2. linux 查询目录文件大小

  3. axios与ajax的优缺点

    axios和ajax的区别是什么?        1.axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装:         2.ajax技术实现了局部数据的刷新,而axio ...

  4. Es6中模块引入的相关内容

    注意:AMD规范和commonJS规范 1.相同点:都是为了模块化. 2.不同点:AMD规范则是非同步加载模块,允许指定回调函数.CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行 ...

  5. xlwings.copy两种用法和匹配超链接

    第一种复制整个sheet页,不能覆盖同名sheet,需先删除.name新sheet也名称 after复制后的位置wb.sheets('增量机会-体外刷新导入').copy(name='快照版本(勿动) ...

  6. Java流程控制之break、continue、goto

    break.continue break在任何循环语句的主体部分,均可用break控制循环的流程.break用于强行退出循环,不执行循环中剩余的语句.(break语句也在switch语句中使用) co ...

  7. 动态路由里,将component字符串改变为路由懒加载方法

    一.import写法 报错 function loadPageByRoutes(str) { // 传入的str为 '@/views/Home.vue' 这种格式 return () => im ...

  8. 公共的common.scss (覆盖部分element组件主题色)

    公共的 common.scss (包含主题色 覆盖部分element组件主题色) $theme: #D50000; $litterTheme: #ec6059; .text-theme { color ...

  9. mysql使用保留字导致该列查不出来(mysql版本问题)

    mysql版本是 问题: 如图这边groups是sql的保留字此时这样查询是查不出来的,并会报错语法错误.但是在5.几的mysql版本中这行sql就没有问题. 解决方法: 在groups列上加上'gr ...

  10. Flink配置详解及实践

    #jobManager的IP地址jobmanager.rpc.address: localhost #JobManager的端口号jobmanager.rpc.port: 6123 # JobMana ...