vue el-table的常用操作

最新推荐文章于 2024-06-25 09:32:53 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2024-06-25 09:32:53 发布

阅读量6.1k

点赞数 1

分类专栏： Element UI 文章标签： css

本文链接：https://blog.csdn.net/Yueqin0512/article/details/118250481

版权

这篇博客详细介绍了在Vue项目中使用el-table组件时，如何进行一系列样式定制，包括去除表格底部线条、设置表格透明背景、自定义数据文本样式、调整列标题和文本样式、解决滚动条样式兼容问题、修改列宽和行高，以及为特定列设置背景和文字颜色，并实现鼠标悬停效果。

摘要由CSDN通过智能技术生成

文章目录

1.去掉表格最下面的那一条线

在这里插入图片描述

.el-table::before {
   
    height: 0;
}

效果
在这里插入图片描述

2.表格去掉背景颜色变透明

.el-table,
.el-table__expanded-cell {
   
    background-color: transparent !important;
}
.el-table th,
.el-table tr,
.el-table td {
   
    background-color: transparent !important;
}

3.表格加载数据时，自定义文本样式

<template>
     <el-table :data="tableData" style="width: 100%">
       <template slot="empty">
         <p>{
  {dataText}}</p>
       </template>
       <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

最低0.47元/天解锁文章

吃不胖的猫o(=^ェ^=)m

关注

1
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
vue el-table的常用操作

1.去掉最下面的那一条线.el-table::before { height: 0;}2.表格去掉背景颜色变透明.el-table,.el-table__expanded-cell { background-color: transparent !important;}.el-table th,.el-table tr,.el-table td { background-color: transparent !important;}/* 最外层透明 */:
复制链接

扫一扫

专栏目录