| 文章中可能会用到的知识链接 |
|---|
| vue3+ant design vue+ts实战【ant-design-vue组件库引入】 |
| css样式穿透(/deep/ ::v-deep深度选择器)🔥🔥 |
| vue3 antd项目实战——table表格(一文带你快速实现后台管理系统最常用的table表格)🔥🔥 |
修改antd table的默认样式
ant design vue组件库固然简单好用,但是它的默认样式有时候非常鸡肋,有些是不太符合我们的需求的。比如,表格的padding过宽,又比如,更改行颜色。 这时我们需要用到 vue组件的样式穿透 来更改table表格的默认样式。
改变默认样式之前: 👇👇👇

表格源码:(包含表格数据data、表格纵列目录columns)
{{ text }}
这里我采用的是最通用的解决方式3。 👇👇👇
解决方式3——通用的样式穿透(使用::v-deep)
解决方式1——sass和less的样式穿透(使用/deep/)
解决方式2——stylus的样式穿透(使用>>>)
用上述方法更改默认样式之后的样式: 👇👇👇
