vue elementUI去掉某个表格边框修改el-table样式

杂草沫

于 2021-04-14 11:58:11 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端 css

本文链接：https://blog.youkuaiyun.com/StacyMo/article/details/115694760

本文介绍了如何在Vue项目中使用ElementUI时，针对特定表格删除边框进行样式修改。提供了两种方法：一是通过添加`class="company-table"`并结合深度选择器`::v-deep`来修改样式；二是不使用`scoped`属性，直接在样式中写入修改。适用于ElementUI版本2.13.2及以上，同时也指出深度选择器的两种写法：`::v-deep`或 `/deep/`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue elementUI去掉某个表格边框修改el-table样式

1.仅改变某个表格样式，不改变其他表格样式。给el-table添加 class=“company-table”

      <el-table :data="tableData" :show-header="false" class="company-table">
        <el-table-column prop="name" label="公司"/>
        <el-table-column prop="" label="操作" width="90" />
      </el-table>

样式如下

方法一：在style中添加scoped时，需要添加深度选择器::v-deep才能改变样式

<style lang="scss" scoped>
	::v-deep .company-table td,
	::v-deep .company-table th.is-leaf {
	  border-bottom: 1px solid transparent;
	}
</style>

方法二：直接在把样式写在style中，不需要添加scoped

<style lang="scss">
	.company-table td,
	.company-table th.is-leaf {
	  border-bottom: 1px solid transparent;
	}
</style>

2.改变表格样式（全局）

    <el-table :data="tableData" :show-header="false" >
        <el-table-column prop="name" label="公司"/>

最低0.47元/天解锁文章

200万优质内容无限畅学

vue elementUI去掉某个表格边框 修改el-table样式

vue elementUI去掉某个表格边框 修改el-table样式

vue elementUI去掉某个表格边框修改el-table样式

vue elementUI去掉某个表格边框修改el-table样式