去掉antd design vue组件库中表格的分割线

前言:

最近在公司完成UI设计稿的时候,需要使用antd design vue组件库中表格,但是UI设计稿中并不需要表格分割线,尝试了多种方式最后实现如下:

css 复制代码
<style lang="scss" scoped>
   ::v-deep .ant-table-cell::before {
     height: 0px !important;
}
</style>

补充:

引入antd design vue组件库后,我们的需求是:局部修改表格的样式,而又不想去除scoped属性造成组件之间的样式污染,在使用vue-cli3编译时,需要使用**::v-deep**

实现效果展示:

官网原本效果:

修改后效果:

相关推荐
德育处主任4 分钟前
p5.js 用 cylinder() 绘制 3D 圆柱体
前端·数据可视化·canvas
用户3802258598247 分钟前
实现虚拟列表
前端·javascript
Revol_C17 分钟前
【Git 操作笔记】第1期--云代码仓库更换服务商,本地如何批量更新对应项目的git地址(持续更新...)
前端·git
yede25 分钟前
uniapp - 自定义页面的tabBar
vue.js·uni-app
Miracle_G26 分钟前
每日一个知识点:实现AJAX和Fetch请求进度条
前端·javascript
数字人直播26 分钟前
视频号数字人直播带货,青否数字人提供全套解决方案!
前端·javascript·后端
Juchecar1 小时前
Vue3 模块组织及 Import 机制详解 - 初学者完全指南
前端·vue.js
KenXu1 小时前
2025 Figma to Code MCP 深度横评
前端
前端进阶者1 小时前
electron-vite_19配置环境变量
前端·electron·vite
yangholmes88881 小时前
如何在 web 应用中使用 GDAL (三)
前端·webassembly