Element UI中实现el-table单元格全部无边框，鼠标浮动到表格上时去掉el-table默认背景色

最新推荐文章于 2024-04-02 10:54:09 发布

不等天亮等时光

最新推荐文章于 2024-04-02 10:54:09 发布

阅读量3.5k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_45059911/article/details/125743238

版权

1.实现无边框
<style scoped>
/* 去除表格线 */
.el_table >>> .el-table__row>td{
  border: none;
}
/* 去除上边框 */
.el_table>>> .el-table th.is-leaf {
  border: none;
}
/* 去除下边框 */
.el_table>>> .el-table::before{
  height: 0;
}
</style>
2.实现当鼠标浮动到表格上时去掉el-table默认背景色
<style scoped>
.el-table
  ::v-deep tbody tr:hover > td {
    background-color: #fff;
  }
</style>

3.使用

<div class="el_table">
  <el-table
    :data="tableData"
    :show-header="false"  //去掉了表头
    style="width: 100%">
    //长度占50%的两列
    <el-table-column
      prop="date"
      style="width:50%">
    </el-table-column>
    <el-table-column
      prop="name"
      style="width: 50%">
    </el-table-column>
  </el-table>
</div>

4.实现效果