修改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 。若原样式有的属性，想在自己的样式中修改该属性，需要给其增加权重。