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