前提条件,引用了预处理,可以使用 /deep/ 或 ::v-deep ,没有使用预处理,使用 >>>
html 部分
<template><el-table:data="tableData":row-class-name="tableRowClassName":header-cell-style="{background:'rgb(237, 192, 255)'}"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template>
script 部分
<script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {// tableRowClassName ({ row, rowIndex }) {// if (row.sfjg == 1) {// return "el-table__row--striped";// } else {// return "";// }// },tableRowClassName ({ row, rowIndex }) {if (rowIndex % 2 !== 0) {return 'el-table__row--striped'}},}}
</script>
style 部分
<style lang="less" scoped>
::v-deep .el-table__body tr,
::v-deep .el-table__body td {padding: 0;height: 34px;
}
// 显示的颜色::v-deep .el-table__body tr.el-table__row--striped td {background-color: pink;}::v-deep .el-table__row {background: rgb(187, 255, 0);}::v-deep .el-table__body tr:hover > td{background-color:rgb(0, 247, 255) !important;
}</style>
对于组件流体高度这个示例会有bug,可以根据 .hover-row 在element-ui 的原文件中更改鼠标移入时的样式,把斑马纹打开,通过 tr.el-table__row--striped.current-row td.el-table__cell 在原文件中更改斑马纹的背景色