1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element-ui中el-table的表头 内容样式

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

时间:2021-06-26 15:29:20

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。