elementui el-table底层背景色修改简单方法

 更新时间:2023年10月09日 09:05:10   作者:乐~~~  
最近在做项目的时候遇到个需求,需要修改el-table背景色,这里给大家总结下,这篇文章主要给大家介绍了关于elementui el-table底层背景色修改的相关资料,需要的朋友可以参考下

1. 需求:仅修改当前页面的背景色,不修改所有el-table的背景色。

  1. 先给table添加类名(如class="styleTable")
  2. 在style上面添加scoped
  3. 写法:类名 ::v-deep .el-table类名{}

注意:给styleTable也设置背景色为透明才生效。

如下图所示??

2. 需求:修改全局背景色

单独创建一个css文件,给el-table th,el-table_cell等你要修改的类名添加背景色为透明;在每个vue页面都引用此文件即可生效。

扩展 (也可以不用看)

1. 需求:设置table的最低高度

把padding的值设为0即可。

.el_table .el_table_cell{
   padding:0px
}

2. 怎么找是设置哪一个样式的属性?

F12打开控制台,然后找到Elements,点击【箭头】选中表格,然后到它的属性,我比较笨,我是一个一个试,最后发现.el_table .el_table_cell 设置了就成功了。

此文档仅供参考哈,鄙人也是刚踏进前端的门,可能写的有误,还请高人指导。??

总结

到此这篇关于elementui el-table底层背景色修改方法的文章就介绍到这了,更多相关elementui el-table底层背景色修改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.prototype详解及使用方式

    Vue.prototype详解及使用方式

    这篇文章主要介绍了Vue.prototype详解及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • ant-design-vue 时间选择器赋值默认时间的操作

    ant-design-vue 时间选择器赋值默认时间的操作

    这篇文章主要介绍了ant-design-vue 时间选择器赋值默认时间的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随过来看看吧
    2020-10-10
  • 解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    这篇文章主要介绍了解决vue项目中前后端交互的跨域问题、nginx代理配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue中props的详解

    Vue中props的详解

    这篇文章主要介绍了Vue中props的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue实现前端展示后端实时日志带颜色示例详解

    vue实现前端展示后端实时日志带颜色示例详解

    这篇文章主要为大家介绍了vue实现前端展示后端实时日志带颜色示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue动态加载SVG文件并修改节点数据的操作代码

    vue动态加载SVG文件并修改节点数据的操作代码

    这篇文章主要介绍了vue动态加载SVG文件并修改节点数据的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 用vue实现注册页效果 vue实现短信验证码登录

    用vue实现注册页效果 vue实现短信验证码登录

    这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue中props组件和slot标签的区别

    Vue中props组件和slot标签的区别

    props 和 slot 在 Vue 中的作用略有不同,props 更多地用于父子组件之间的数据传递,而 slot 则更多地用于组件的复用和扩展。感兴趣的同学可以参考阅读
    2023-04-04
  • 一篇文章告诉你Vue3指令是如何实现的

    一篇文章告诉你Vue3指令是如何实现的

    在计算机技术中,指令是由指令集架构定义的单个的CPU操作,在更广泛的意义上,“指令”可以是任何可执行程序的元素的表述,例如字节码,下面这篇文章主要给大家介绍了关于Vue3指令是如何实现的相关资料,需要的朋友可以参考下
    2022-01-01
  • Vue3如何自定义v-permission权限指令

    Vue3如何自定义v-permission权限指令

    这篇文章主要为大家详细介绍了Vue3如何编写一个 v-permission 指令来根据用户权限动态控制元素的渲染,感兴趣的小伙伴可以参考一下
    2024-12-12

最新评论