覆蓋Ant Design Vue中Table表格的固定高度和寬度

Ant Design Vue_Table表格的固定高度和寬度

​ 需求在這一小塊div中做一個Table,如果用Ant Design Vue中的a-table,默認的高度和寬度會撐開這么小得div范圍,在官方的Api文檔中也沒有找到有關的參數

​ 本文就是解釋如何使用Ant Design Vue中的a-table完成大小改變

代碼展示

• 加入這樣寫的話,Div必定會被撐開,table也會伸展到下面的模塊
• 由於項目后台崩了,頁面打不開,我就不做錯誤展示了

<div class="countySort">
    <div class="countySortFontColor">全區排名</div>
    <div class="testBox2" style="margin-bottom: 30px">
        <a-table 
                 :columns="columns" 
                 :data-source="CountySortData" 
                 :pagination="false" 
                 >          
        </a-table>
    </div>
</div>

重寫或者覆蓋原本的a-table的樣式

• /deep/的作用我聽前端同事說是可以實現覆蓋和重寫的效果,再加上 !important;來提高優先級

以及我們樣式中的和a-table標簽中的源碼樣式取名是一樣的,這樣就能實現覆蓋原本的樣式

• 簡單總結來說,當你想修改一個被封裝好的組件樣式時,利用重名,優先級覆蓋樣式的特性來實現
  • 四要素:
    • /deep/ 關鍵字可以實現覆蓋和重寫
    • 取一個想要被覆蓋掉的樣式名
    • 樣式內屬性重寫
    • 加上關鍵字!important來提高優先級(可以先不加看看)

    // 給.ant-table設置最低高度
    /deep/.ant-empty-normal {
     margin: 1.9% 0 !important;
    }

    // 當表格數據為空時，修改.ant-empty-normal樣式，會撐高空白樣式
    /deep/.ant-table {
      min-height: 1.9% !important;
    }
    /deep/ tr{
      height: 1px !important;
      line-height: 1px !important;
      padding: 0px !important;
    }
    /deep/ td{
      height: 1px !important;
      line-height: 1px !important;
      padding: 0px !important;
    }
    /deep/ th{
      height: 1px !important;
      line-height: 1px !important;
      padding: 0px !important;
    }
    /deep/ .ant-table-tbody{
      padding: 0px !important;
    }