修改antd vue组件a-table的默认样式

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

  • a-table表格padding过宽
如图所示

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

        <a-table
          class="AStockOutDetailTable"
          style="margin-top: -5px;"
          :columns="stockOutDetailTable.columns"
          :data-source="stockOutDetailListForPrint"
          :pagination="false"
        />

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

<style lang="scss" scoped>
  .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;
    }
  }
</style>

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

<style lang="stylus" scoped>
  .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;
    }
</style>

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

<style scoped>
  ::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;
    }
</style>

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

 

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页