Element

您所在的位置：网站首页 › 如何给elrmrnt-ui表格美化 › Element

Element

#Element| 来源: 网络整理| 查看: 265

1.el-table整个容器的样式标签的style中设置

复制代码

2.el-table表头的样式修改

复制代码

header-cell-style绑定的函数返回的是表头的样式

函数在methods中定义格式如下：

headerStyle({ row, column, rowIndex, columnIndex }){ if(rowIndex == 0){ return '表头样式' } } 复制代码

3.el-table表头文字换行

方法一：CSS方法

=> 双引号、单引号都不能少 .el-table th>.cell{ white-space: pre-line; //合并空白符正常换行 white-space: pre-wrap; //保留空白符正常换行 } 复制代码

方法二：el-table-column内置渲染函数render-header

renderHeader(h,{column, $index}){ column => 列 index => 列的序号 return的内容可以修改只需要结构上可以换行就行 let header = column.label.split(' '); //以特殊字符将label划分为需要换行的一个部分 return [h('p',{},[ h('p',{},header[0]), h('p',{},header[1]) ])] } 复制代码

4.修改el-table的行和列的样式

背景颜色的修改: /deep/ .el-table 和 /deep/ .el-table__row 都需要修改两者都有默认的背景色 padding的修改 /deep/ .el-table th>.cell 表头th存放内容的div.cell 默认左右的padding有10px /deep/ .el-table .cell 显示内容区域的div.cell 默认左右的padding有10px /deep/ td 显示内容区域的td默认左右的padding各5px 若是表头的div.cell有特殊样式可以单独设置再去设置所有的div.cell 若是表头的div.cell和显示区域的div.cell样式一致则可以直接使用第二种形式设置 border的修改 /deep/ .el-table td 默认内容格有个border-bottom /deep/ .el-table th.is-leaf 默认表头有个border-bottom 但是header-cell-style中可以修改 /deep/ .el-table__body-wrapper 整体内容区域默认有border-bottom hover样式的修改 /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: transparent !important; } 复制代码

原文链接：blog.csdn.net/qq_44747461…

【本文地址】

Element

Element

今日新闻

推荐新闻