antd vue 位置变动 固钉消失_修改antd vue组件a-table的默认样式

antd vue的组件固然简单好用,但是其默认样式有时是并不符合我们的需求的,我在开发过程中遇到一个问题:

a-table表格padding过宽

如图所示

而我需要将这个表格进行打印,因此需要在保证样式美观的同时最大限度地利用纸张,所以我想把padding调小一点,这里就用到了vue的样式穿透。

class="AStockOutDetailTable"

style="margin-top: -5px;"

:columns="stockOutDetailTable.columns"

:data-source="stockOutDetailListForPrint"

:pagination="false"

/>

1. sass和less的样式穿透 使用:(/deep/)

.AStockOutDetailTable{

& /deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td {

padding: 8px 8px;

overflow-wrap: break-word;

}

& /deep/ .ant-table-tbody .ant-table-row td {

padding-top: 8px;

padding-bottom: 8px;

}

}

2. stylus的样式穿透 使用:(>>>)

.AStockOutDetailTable >>> .ant-table-thead > tr > th, .ant-table-tbody > tr > td {

padding: 8px 8px;

overflow-wrap: break-word;

}

.AStockOutDetailTable >>> .ant-table-tbody .ant-table-row td {

padding-top: 8px;

padding-bottom: 8px;

}

3. 通用的样式穿透 使用:(::v-deep)

::v-deep .ant-table-thead > tr > th, .ant-table-tbody > tr > td {

padding: 8px 8px;

overflow-wrap: break-word;

}

::v-deep .ant-table-tbody .ant-table-row td {

padding-top: 8px;

padding-bottom: 8px;

}

第三种方式,我在使用的时候会爆红,但是能起作用,或许有哪位前端大佬能给我这个后台开发小菜鸡解释一下~

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页