el-table 行实现卡片样式

最新推荐文章于 2025-05-09 18:24:41 发布

小六路

最新推荐文章于 2025-05-09 18:24:41 发布

阅读量332

点赞数 2

分类专栏： element 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/Lycoris_Red/article/details/142954324

版权

element 专栏收录该内容

1 篇文章

订阅专栏

::v-deep {
    .el-table--small .el-table__cell {
        padding: 0 0 10px 0;
    }

    // 去掉鼠标移入原来的样式
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
        background-color: transparent !important;
    }
    // 鼠标移入颜色
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell .cell{
        background: #f1f7fa;
    }

    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
        border:0;
    }
    .el-table td .cell{
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        height: 80px; 
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #000;
    }
    //此代码是让每行左侧变圆
    .el-table td:first-child {
        .cell {
            border-left: 1px solid $border;
            border-radius: 10px 0 0 10px;
        }
    }
    // 此代码是让每行右侧变圆
    .el-table td:last-child {
        .cell {
            border-right: 1px solid $border;
            border-radius: 0 10px 10px 0;
        }
    }

}