• 在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使用的并不是之前的版本啊,有人说是添加scoped的原因,去掉之后确实可以了,但我还是想添加scoped, 所以我修改之后是:

    1. <style lang="stylus" scoped>
    2. .el-table
    3. >>> .headerColor
    4. background red
    5. </style>
    6. <script>
    7. export default {
    8. methods: {
    9. headerStyle ({row, rowIndex}) {
    10. return 'headerColor';
    11. }
    12. }
    13. };
    14.  
    15. </script>

      我发现这样确实可以, 这里我们先看一下为什么无法修改样式,elementUI的样式是定义在全局中,我们使用scoped时,局部样式会被全局样式所覆盖(vue默认全局样式覆盖局部样式),因为elementUI样式作用于全局,scoped是局部样式。所以我们修改时1.可以增加权重,覆盖掉全局样式。2.就是使用scoped,我们希望样式作用的够深,例如影响到子组件,scoped网上有很多描述的;

关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析的更多相关文章

  1. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  2. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  3. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

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

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

  5. element UI表格行高、padding等设置报错问题

    element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 : 1.row-style (行的 style) 2.header-row-styl   (表 ...

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

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

  7. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  8. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  9. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

随机推荐

  1. openKM部署二次开发,eclipse环境

    1.下载openKM_install_forwin安装包,配置jdk环境,start openKM,访问localhost\OpenKM,用户:okmAdmin 密码:admin.查看是否启动成功.安 ...

  2. Android-SD卡相关操作

    SD卡相关操作 1.获取 App 文件目录 //获取 当前APP 文件路径 String path1 = this.getFilesDir().getPath(); 当前APP目录也就是应用的这个目录 ...

  3. C# 集合已修改 可能无法执行枚举操作 zz

    今天编写程序时 修改了list集合 在foreach时报 “集合已修改:可能无法执行枚举操作.”错误. 首先想到的是没有锁定集合对象. 增加了 private readonly object sync ...

  4. Chapter 4 : Control Structures 1 : Selection

    Although it need not be, the expression is usually an identifier. Whether it is an identifieror an e ...

  5. vue_表单 input 的绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 浅谈vue性能优化

    基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...

  7. 为ivew的Page组件的跳页增加跳页确定按钮

    首次使用vue做后台管理项目,首次使用ivew框架,好不容易所有的功能都做完了,前几天产品经理让在每个列表的跳页后面加个‘确定’按钮,说没有确定按钮有点反人类,心想那还不分分钟的事儿嘛,立马回个‘好的 ...

  8. CodeForces 1143A The Doors

    The Doors 签到题 #include <iostream> using namespace std; int a[200005]; int main() { int n; scan ...

  9. tomcat之过滤器

    过滤器是一种特殊的servlet,也需要在配置文件中进行配置,通过它可以将指定的请求拦截下来,之后对请求处理,处理完之后,将拦截请求放行.实现过滤器也需要实现一个接口叫javax. servlet.F ...

  10. WPF气泡样式弹窗效果

    页面设计需求,做了一个气泡形状的弹出框,效果如下: 设计思路如下: 1. 使用Path绘制气泡的尖尖,将这个放到顶层: 2. 在用border绘制长方形框,将这个放到底层,并且设置Margin值,使得 ...