Vue修改element-admin UI <el-table> tr 表-子项的高度 及背景颜色

这篇具有很好参考价值的文章主要介绍了Vue修改element-admin UI <el-table> tr 表-子项的高度 及背景颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue修改element-admin UI <el-table> tr 表-子项的高度 及背景颜色,vue.js,ui,前端,elementui,vue先看效果图-表头背景颜色高度  自定义

   <!--   表头样式   颜色及高度          表格数据-->
    <el-table :data="tableData" style="width: 100%" 
     :header-cell-style="{ background: '#74E77F',padding: '0',borderTop: '1px solid #eaeaea',fontSize:'12px',color:'#808080'}"
      :header-row-style="{height:'36px'}"
 
 
      :row-style="{height:'37px',fontSize:'12px', background: '#17B3A3'}">  
 <!--  在这里  👆表的  每个子项  颜色及高度  且必须加下面  样式代码--去掉默认样式用的>
 
 
 
   
               <!--   忽略-->
              <el-table-column type="selection" width="55">
              </el-table-column>
               <el-table-column prop="empName" label="用户名称">
               </el-table-column>
 
 
</el-table>

样式代码-----别想着加  !important    我也试了不行

如果style 用了  :<style lang="scss">

/* 注意此处不能有scoped 否则样式无法生效 */          

那么去掉 ::v-deep 即可正常使用文章来源地址https://www.toymoban.com/news/detail-610212.html

::v-deep.el-table--medium .el-table__cell {
    padding: 0px 0;
}

到了这里,关于Vue修改element-admin UI <el-table> tr 表-子项的高度 及背景颜色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui的el-table属性修改,如内边框,斑马纹,列宽度...

    el-table :data=\\\"tableData\\\" style=\\\"width: 100%\\\" border el-table-column prop=\\\"date\\\" label=\\\"日期\\\" width=\\\"180\\\"   /el-table-column el-table-column prop=\\\"name\\\" label=\\\"姓名\\\" width=\\\"180\\\" /el-table-column el-table-column prop=\\\"address\\\" label=\\\"地址\\\" /el-table-column /el-table 这个用来取消表格里面td的边框 ::v-deep .el-table__row td {   /* 去除表格

    2024年02月12日
    浏览(49)
  • vue使用element-ui,el-table不显示

    例如:新增了一个表格,按官网代码贴过来的,结果一直不显示 代码如下一模一样,其他数据正常显示,就表格不显示 其实版本库不一致导致的,贼坑,又不提示 先卸载element-ui安装一个低版本的element-ui就可以解决``

    2024年02月11日
    浏览(60)
  • vue(element ui )el-table树形表格展示及数据对齐

    注意点: el-table配置里 row-key 必须是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置为后端返回的节点字段即可

    2024年02月16日
    浏览(46)
  • element-ui的树形表格el-table懒加载lazy子节点修改数据后局部刷新

    在使用element-ui的树形表格(el-table)懒加载(lazy),并使用了懒加载,出现了一个问题,在对当前节点添加、修改、删除一个子节点数据时,当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。 首先,在data(){}中定义一个maps:new Map();

    2024年02月12日
    浏览(46)
  • vue element-ui表格(el-table)数据导出execl文件

    功能实现:element UI 的el-table数据导出为execl文件 使用到插件:xlsx、file-saver exportExecl.js 代码如下: 页面代码如下:

    2024年02月14日
    浏览(52)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(52)
  • Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

    用vue+element ui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下: 代码文件结构: 废话不多说,直接上代码: 第一步:新建名为 TableHeaderRender.vue 的文件 template   el-popover     placement=\\\"bottom\\\"     width=\\\"2

    2024年02月02日
    浏览(61)
  • vue使用Element UI时,el-table表格整行操作单选

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月14日
    浏览(43)
  • vue element ui el-table单元格里面显示多张图片点击并放大

    效果图: 一个单元格里面显示三张图片,并且点击图片可以放大。 1.将图片v-for渲染出来,具体上代码 注:el-popover的属性   2.单元格里能够展示多张图片,需要在请求的接口里面做处理 以上两步,就可以实现上面的功能。

    2024年02月07日
    浏览(48)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包