element-ui中el-table的表头、内容样式

方式1：
直接在标签上添加上属性值：

<el-table:header-cell-style="{background:'#F3F4F7',color:'#555'}"
></el-table>

方式2：
在method里面写上方法：

rowClass({ row, rowIndex}) {console.log(rowIndex) //表头行下标return 'background:#F3F4F7;color:#555'
}

然后在el-table标签中使用方法：

<el-table :header-cell-style="rowClass"></el-table>

element-ui中el-table的表头、内容样式

<el-table :data="list" style="width: 100%" :border="border"  //是否显示边框stripe  //是否显示斑马纹:header-cell-style="{color:'#333',fontFamily:'MicrosoftYaHeiUI',fontSize:'14px',fontWeight:900}"  //表头字体样式:row-style="{fontSize:'12px',color:'#666',fontFamily:'MicrosoftYaHeiUI'}"  //表内容字体样式:row-class-name="tabRowClassName"   //单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className
><el-table-column prop="name" label="名称" align="center" ></el-table-column>
</el-table>data(){return{border:true,stripe:true,
}
methods:{tabRowClassName({row,rowIndex}){let index = rowIndex + 1;if(index %2 == 0){return 'warning-row'}}
}
}
<styel>
.el-table .warning-row{background:#F3F9FF
}
</style>

element-ui中el-table的表头、内容样式相关推荐

element ui中el-table设置文本居中或者样式修改
header-cell-style设置头部居中:cell-style设置单元格内容居中 <el-table:data="tableData":header-cell-styl ...
Element UI中el-calendar日历的使用及样式修改（年月可下拉选框选择）
项目场景: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当天日期,用户可以自由点选日期,被选中后日期以紫色显示,鼠标在日历上移动时,日期显示出橙色.有数据的日期显示出灰色. 实现思路:删 ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...

element-ui中el-table的表头、内容样式

element-ui中el-table的表头、内容样式

element-ui中el-table的表头、内容样式相关推荐

最新文章

热门文章