Ant design vue 样式调整(包含导航栏、a-table表格、分页)

简介: Ant design vue 样式调整(包含导航栏、a-table表格、分页)


需求描述

以下样式均为ant design vue样式调整,进行一些界面上的优化

修改左侧导航栏改变颜色(选中及悬浮)

如果你想修改左侧导航选中后 以及鼠标悬浮在某个菜单栏上改变样式时,把下面的三段代码复制到 你项目下的public文件夹下的index.html文件里,注意要把这段代码放到<style></style>标签里

鼠标点击菜单后改变背景颜色

.ant-menu-item-selected{
      background: linear-gradient(270.00deg, rgba(125,178,217,0.50),rgba(196,196,196,0.00) 100%) !important;
    }

鼠标选中后改变颜色

.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
      background-color: rgb(239, 242, 245) !important;
    }
        .ant-menu-inline .ant-menu-item::after{
      border-right: 3px solid rgb(18, 92, 179)!important;
    }

鼠标点击菜单后改变字体颜色

在你的项目下src--->components--->layouts--->TabLayout.vue文件里进行修改

.ant-menu-item-selected > a, .ant-menu-item-selected > a:hover{
    color: #125CB3 !important;
  }

鼠标悬浮菜单改变字体颜色

在你的项目下src--->components--->layouts--->TabLayout.vue文件里进行修改

.ant-menu-inline > a, .ant-menu-item > a:hover{
    color: #125CB3 !important;
  }

修改a-table表格中字体颜色

.ant-table-tbody > tr > td {
  color: white;
  background: #3071b9 !important;
}

修改分页页数颜色

.ant-pagination-item-active a{
    color: #125CB3 !important;
  }
目录
相关文章
|
3月前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
274 1
|
3月前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
4月前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
428 61
|
3月前
|
存储 JavaScript UED
在 Vue 组件中动态切换全局样式
【10月更文挑战第5天】
77 1
|
3月前
|
JavaScript 前端开发
|
3月前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
41 1
|
5月前
Vue3分页(Pagination)
这是一个高度可定制的分页组件,支持通过属性设置当前页数、每页条数、数据总数等,并提供了禁用分页、隐藏单页分页、快速跳转等功能。此外,还可以自定义分页的位置、显示的数据条数选项及数据总数的显示格式。组件内置了对多种场景的支持,如禁用状态下的分页操作、不同位置的分页显示等,适用于多种应用界面需求。在线预览展示了各种配置项的效果。
123 1
Vue3分页(Pagination)
|
3月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
56 0
|
5月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
181 0
Vue3表格(Table)
|
5月前
|
JavaScript
在vue使用vant在<stylus>中修改样式
在vue使用vant在<stylus>中修改样式
45 0