Vue Element Admin 设置固定头部

最新推荐文章于 2024-05-21 11:36:23 发布
最新推荐文章于 2024-05-21 11:36:23 发布
阅读量1.9k 收藏 2
点赞数 1
分类专栏： 前端 element ui  vue 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lchmyhua88/article/details/122286232
版权

Element UI TagView 滚动 固定头部 settings.js
关键词由CSDN通过智能技术生成
此篇博客介绍了如何在Element UI的TagView组件中实现页面滚动时头部始终保持固定，通过修改settings.js文件的fixedHeader设置为true来实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在element ui后台tagview 我们希望在body中上下滚动的时候固定下来不动，我们来看看效果：

修改 src\settings.js 中 fixedHeader 值为 true，默认为 false 

 

 这样就可以达到这个效果了

[vue-element-admin]设置icon+浏览器+侧边栏等图标、标题
u013998349的博客
11-28 1万+
vue-element-admin中设置icon图标一、引入图标ICON：二、使用步骤1.src/router/index.js参考资料： 一、引入图标ICON： https://www.iconfont.cn/ 可以到https://www.iconfont.cn/上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。 二、使用步骤 1.src/router/index.js 直接在meta: { title: ‘主页’, icon: ‘dashb
vue+element ui动态表头，最左侧固定列可展开，除左侧固定列内容外，其余数据非零可点击展示详情页。
qq_38916157的博客
03-27 1762
没做过列不固定的，记录一下 <template> <section > <div class="cec-table"> <template> <el-table :data="tableData" row-key="id" :tree-props...
一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头
binggoling
01-07 1525
目录一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头一、效果二、配置实现 一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头 一、效果 动态设置展示sidebar系统Logo、固定navbar头 界面设置 二、配置实现 1）新增文件：src\components\RightPanel\index.vue 直接拷贝my-vue-element-admin的src\components\RightPanel\ind
vue+Element 设置头部固定，并解决遮罩层显示问题
changyana的博客
07-10 2257
通过整体框架代码可以看到，其实element-ui已经实现了头部固定。
vue-element-template增加多标签页tagsview
FellAsleep的博客
07-11 1577
vue-element-template增加多标签页tagsview 最后如果你要固定住tagsView,那么这里你需要设置下。
VSCode搭建Vue Element Admin的项目环境
04-11
### VSCode搭建Vue Element Admin的项目环境 #### 版本说明 - **Node**: v18.20.2 - **NPM**: 10.5.0 - **Git**: 2.19.1 - **Vue Element Admin**: [官网链接]...
vue-element-admin 精简版
03-03
"Vue-element-admin 精简版"是一款基于Vue.js的前端框架，专为简化项目构建而设计。这个版本剔除了不必要和冗余的组件，只保留了基础框架结构，包括设置模块和头部导航栏，使得项目更加轻量级，适用于快速开发和小...
vue-admin-template配置快捷导航的代码（标签导航栏）
12-28
vue-element-admin有关快捷导航说明 1、添加标签 @/layout/components/AppMain.vue添加： <keep include=cachedViews> <!-- 新增 --> </keep> <!-- 新增 --> </secti
Vue 人资 实战篇一 vue-element-admin学习，项目初始化，sass运用
m0_55170432的博客
05-31 1042
人力资源的环境搭建 1.0 vue-element-admin的了解和介绍 vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/) 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 是一个后台集成方案, 集成了PC项目中很多的业
如何给element-ui的表格头部加按钮、加图标、加自定义内容
weixin_38809190的博客
05-23 1万+
关于如何给element-ui的表格头部加按钮、加图标、加自定义内容等等，话不多说上图： 代码： 嗯，就这样了。
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠
karshey的博客
11-02 7086
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠
记录一下 如何将el-tabs头部固定在顶部
普通前端一枚
05-29 1272
【代码】记录一下 如何将el-tabs头部固定在顶部。
在element-ui中的dialog中固定底部操作按钮
热门推荐
暴躁鹅的博客
12-03 1万+
未来了在dialog里固定底部按钮 我刚开始用 position:flxed 但是十分效果不佳用relative和absolute也达不到想要的效果 最终解决方法： position:sticky 黏性定位 就解决了问题 ...
vue-element-template项目 增加固钉 步骤
u013100927的专栏
11-05 1547
按照作者所说的，需要什么功能，从vue-element-admin-master中拷贝过来使用即可。 一、从vue-element-admin复制文件： 　　vue-admin-template\src\layout\components\TagsView 文件夹 　　vue-admin-template\src\store\modules\tagsView.js 二、修改 vue-admin-template\src\layout\components\AppMain.vue ：AppMa...
vue——实现页面滚动时，dom固定在顶部——基础积累
yehaocheng520的博客
06-16 3459
vue——实现页面滚动时，dom固定在顶部——基础积累 window.addEventListener监听页面滚动事件
vue 固定div 滚动_css固定div头部 滚动条滚动内容
weixin_39963287的博客
01-14 1715
页面布局，固定头部，滚动下方内容实际场景在制作页面的时候，经常会遇到要这样的情况：整个页面，整体分三大模块，头部固定，内容区域，左边固定，右边可以滚动。最终想要的效果案例源码css固定div头部，滚动条滚动内容.headDiv {position: fixed;/*固定定位*/top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 60px;bo...
laravel-admin 头部添加操作
believer_li的博客
03-07 447
【代码】laravel-admin 头部添加操作。
vue底部分页利用position: fixed固定，切换时闪动问题
最新发布
likexiziname的博客
05-21 866
vue底部分页利用position: fixed固定，切换时闪动问题
vue-element-admin中文设置
08-08
### 回答1： vue-element-admin是一个基于Vue.js和Element UI的后台管理系统模板。它支持多语言设置，包括中文。要设置中文语言，可以在/src/lang目录下找到zh.js文件，将其复制到/src/lang目录下，并将其命名为index.js。然后在/src/main.js文件中引入index.js文件，并将其添加到VueI18n实例中。最后，在/src/settings.js文件中将language设置为'zh'即可。这样就可以将vue-element-admin设置为中文语言了。 ### 回答2： vue-element-admin是一个基于Vue.js和Element UI的后台管理系统模板，它提供了一套完整的中文设置方案。 首先，在项目中引入Element UI库并使用中文语言包。在main.js文件中，使用import引入Element UI，并使用Vue.use()方法使用Element UI插件。然后，使用按需加载的方式引入中文语言包，如Vue.use(ElementUI, {locale})，其中locale为中文语言包。 接下来，通过配置来设置中文。在项目的src目录下新建settings.js文件，并将以下内容复制到该文件中： ``` module.exports = { title: 'Vue Element Admin', // 项目名称 fixedHeader: false, // 是否固定头部导航栏 sidebarLogo: false // 是否显示侧边栏Logo } ``` 在项目的src目录下找到components目录，在该目录下新建Settings.vue文件，并将以下内容复制到该文件中： ``` <template> <el-switch v-model="settings.fixedHeader" active-color="#13ce66" inactive-color="#ff4949"></el-switch> <el-switch v-model="settings.sidebarLogo" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </template> <script> import settings from '@/settings' export default { name: 'Settings', data() { return { settings: settings } } } </script> ``` 这样，在项目中就可以通过Settings.vue组件来设置相关的中文选项。通过调用settings对象来获取和设置相关设置的值。 最后，在需要显示设置菜单的地方添加以下代码： ``` <el-dropdown item-class="dropdown-item" size="small"> <span class="el-dropdown-link" style="cursor: pointer"> <i class="el-icon-setting"></i> </span> <el-dropdown-menu slot="dropdown"> <settings></settings> </el-dropdown-menu> </el-dropdown> ``` 通过以上设置，就可以在vue-element-admin项目中实现中文设置。 ### 回答3： vue-element-admin 是一种基于 Vue.js 和 Element UI 的后台管理系统解决方案。它具有丰富的功能和灵活的可定制性，使开发者能够快速构建出美观、易用的后台管理界面。 为了将 vue-element-admin 设置为中文界面，您可以按照以下步骤进行操作： 1. 首先，在下载并成功安装了 vue-element-admin 的基础上，在项目的根目录下使用命令行工具进入该项目。 2. 打开 `src/settings.js` 文件，找到 `language` 字段，将其值改为 `'zh-CN'`，即设置语言为中文。 3. 接下来，打开 `src/lang/zh-CN.js` 文件，该文件是用于定义中文语言包的地方，您可以对其进行编辑和自定义。 4. 在 `src/lang/zh-CN.js` 文件中，您可以找到或添加对应的中文翻译，例如 `"dashboard": "仪表盘"`，将英文字段翻译为中文，并保存文件。 5. 最后，重新编译项目，在命令行工具中运行 `npm run build` 命令，待编译成功后，您将得到一个带有中文界面的 vue-element-admin 后台管理系统。 通过以上步骤，您就成功将 vue-element-admin 设置为中文界面。在此基础上，您可以继续根据自己的需求进行界面定制、样式调整等操作。希望对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值