【element-ui改变table样式】
特别注意一下问题：
首先，因为element-ui的属性是全局的，style不能设置scoped，否则不起作用
其次，因为element-ui的属性是全局的，所以如果改变当前页面为了不影响其他页面，必须给当前页面一个id，再设置他的style
问题1：如何改变table 的行元素的hover背景色？
方案：在style里面添加一下样式。#id 为当前页面最外层的id名字
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
#id .el-table—enable-row-hover .el-table__body tr:hover>td {
background-color: #dfd21a;
}
（注意：如果el-table-column设置了fixed属性，则hover不起作用）
问题2：如何改变table点击某一行元素的背景颜色？
方案： 首先：在el-table 里面添加highlight-current-row属性
其次：在style里面添加一下样式。#id 为当前页面最外层的id名字
/* 用来设置当前页面element全局table 选中某行时的背景色*/
#id .el-table__body tr.current-row>td{
background-color: #f1471c !important;
}
问题3：如何实现斑马表格样式，并改变默认的表格样式
默认样式如下：
想要的效果如下：
方案：首先stripe属性可以创建带斑马纹的表格，在el-table里面添加stripe属性即可创建如图的默认样式，但如果我们要自定义样式，则不能加stripe属性
第二，创建我们想要的效果，则做如下步骤
1.在el-table里面添加:row-class-name=”singleDoubleStyl”属性（singleDoubleStyle为方法名）
2.在methods里面定义singleDoubleStyle方法
singleDoubleStyle ({row,rowIndex}) {
if(rowIndex%2 ===0){
return ‘pink’
} else {
return ‘blue’
}
}
3.在style里面设置pink和blue的样式
/* 方式1 */
/* .el-table .pink {
background: pink;
}
.el-table .blue {
background: powderblue;
} */
/* 方式2 */
.pink {
background: pink !important;
}
.blue {
background: powderblue !important;
}
问题4：如何改变表格头部的样式
方案：在el-table里面绑定如下样式
:header-cell-style=”{
‘background-color’: ‘green’,
‘color’: ‘rgb(103, 194, 58)’,
‘border-bottom’: ‘1px rgb(103, 194, 58) solid’
}“
￡神魔★判官ぃ
痛定思痛。
左手的ㄟ右手
朱雀
还没有评论，来说两句吧...