修改antdv的側邊菜單欄寬度及table表頭字體樣式

修改antdv側邊菜單欄寬度

先通過右鍵“檢查”（也可直接按F12），通過Select箭頭定位

 

於是在element.style中加width: 300px ，效果如下

 

 

 發現僅僅改了局部的樣式，所以此刻應該往外層定位，即找到

 

 

 

 編寫如下代碼：

element.style{
    flex: 0 0 250px ;
    max-width: 250px;
    min-width: 250px;
    width: 250px;
}

樣式生效后，然后找到對應代碼部分修改，然后找到了GlobalLayout中加入

  // 側邊菜單欄寬度
   .ant-layout-sider-dark {
    flex: 0 0 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 250px !important;
}

 

 

修改table表頭字體樣式

同上方法找到位置，此處想應用到全局樣式，即在GlobalLayout.vue 中加入如下代碼

  // 表格表頭字體樣式修改
  .ant-table-header-column {
  font-weight: bold;   // 字體加粗
}

倘若想局部生效，例如在userlist中生效，即在userlist.vue 中的style中加入

<style lang="less" scoped>
 /deep/ .ant-table-header-column {
    font-weight: bold; // 字體加粗
  }
</style>

注意：原樣式沒有的屬性，在自己的樣式中新增，不需要增加權重，即不需要添加 !important 。若原樣式有的屬性，想在自己的樣式中修改該屬性，需要給其增加權重。