赞
踩
前提条件,引用了预处理,可以使用 /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-column
- prop="date"
- label="日期"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="姓名"
- width="180">
- </el-table-column>
- <el-table-column
- prop="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 在原文件中更改斑马纹的背景色
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。