elementui 更改 el-table 表头样式及修改el-table表格边框的注意事项
elementui 修改 Table 表格 样式 更改 注意事项 el
2023-09-11 14:19:17 时间
效果图
初衷
element ui官方封装好的 el-table 组件, 好用是挺好用的,但不可避免的是默认的样式并不一定能满足实际开发过程中的需要,那就自己动用五姑娘吧。
入坑
一是参考官方文档里面 el-table 的 header-cell-style 和 cell-style 属性进行修改,如:
<el-table header-cell-style="border-color: #868686; color: #606266"></el-table>
另外也可以使用 header-cell-class-name 和 cell-class-name 属性,如:
<el-table cell-class-name="cell-class-name"></el-table>
style:
.cell-class-name {
border-color: #868686;
}
问题
使用 header-cell-style和 cell-style 属性虽然能正常显示效果,但会抛出异常,反正我是没整明白,另外,header-cell-class-name 设置覆盖样式,无法生效,而 cell-class-name 则可以。
该类型检查失败
解决方法
设置 el-table 属性:cell-style="tableCellStyle"和:header-cell-style=“tableHeaderCellStyle”,通过 js 代码修改样式。
里添加:
<el-table
:data="tableData"
:v-loading="tableLoading"
row-key="id"
height="100%"
highlight-current-row
show-summary
border
fit
style="width: 100%; border:1px solid #EBEEF5; border-color: #868686"
:cell-style="tableCellStyle"
:header-cell-style="tableHeaderCellStyle"
>
<el-table-column fixed type="index" width="50"></el-table-column>
</el-table>
<script> => methods方法里添加:
// 修改 table cell边框的背景色
tableCellStyle () {
return 'border-color: #868686;'
},
// 修改 table header cell的背景色
tableHeaderCellStyle () {
return 'border-color: #868686; color: #606266;'
}
原文转载
相关文章
- elementui table 闪动以及table不停拉伸的问题
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- Ajax 请求队列解决方案并结合elementUi做全局加载状态
- elementui默认样式修改的几种方法
- vue实战入门进阶篇九:vue+elementui实现网站后台-系统设置界面实现
- vue实战入门进阶篇八:vue+elementui实现网站后台-内容配置界面实现
- vue实战入门进阶篇四:vue+elementui实现网站后台-主页框架实现
- ElementUI的loading状态的使用
- ElementUI中dialog弹出框高度处理
- Vue+ElementUI 导航组件
- elementUI table使用:实现前端分页、表头禁用多选、分页保持选中状态、最多选中N行、el-table表格selection设置复选框禁止选中某些行
- TypeError: value.getTime is not a function (elementUI报错转载 )
- 【转】elementui 获取el-options的value和label
- 原生js造轮子之----仿ElementUI消息提示组件,含生命周期钩子
- vue封装组件,类似elementUI组件库打包发布到npm上