本文目录
vue动态路由
《template》 《el-container style="height: 100vh; border: 1px solid #eee"》 《el-aside width="200px" style="background-color: rgb(238, 241, 246)"》 《!-- :default-openeds="" 表示默认打开第一个和第三个菜单 --》 《!-- 1 对应了el-submenu index="1" 2 对应了el-submenu index="2" --》 《!-- el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项--》 《!-- :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 --》 《!-- default-active="/index/users" --》 《!-- ★ :default-openeds 不可以直接使用 需要使用一个变量openList代替 因为值随时会变 如果写的 是 那么就永远不会改变 会出现点击二级菜单 一级菜单会缩起来的情况--》 《!-- default-active="/index/users" 表示一进入页面就默认激活/index/user导航菜单 default-active不能直接写死值路径要用变量代替 使用监听器 监听路由解决 --》 《!-- unique-opened 是否只保持一个子菜单的展开 boolean 默认是false--》 《el-menu :default-openeds="openList" :router="true" :default-active="pagepath" :unique-opened="true" 》 《!-- index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传给index --》 《!-- 因为i是从0开始的 所以需要加1 --》 《el-submenu :index="(i + 1).toString()" v-for="(v, i) in navList" :key="i" 》 《template slot="title" 》《i class="el-icon-menu"》《/i》{{ v.authName }}《/template 》 《!-- 子选项需要改成例如：1-1格式 以字符串的形式传给index属性 --》 《!-- 因为子选项也是一个数组所以需要再次循环 --》 《!-- :index="’/index/’+item.path" 路径最前面必须加上/ 否则会出现路径覆盖的问题 --》 《el-menu-item :index="’/index/’ + item.path" v-for="(item, index) in v.children" :key="index" 》{{ item.authName }}《/el-menu-item 》 《/el-submenu》 《/el-menu》 《/el-aside》 《el-container》 《el-header style="text-align: right; font-size: 12px"》 《el-dropdown》 《i class="el-icon-setting" style="margin-right: 15px"》《/i》 《el-dropdown-menu slot="dropdown"》 《el-dropdown-item》查看《/el-dropdown-item》 《el-dropdown-item》新增《/el-dropdown-item》 《el-dropdown-item》删除《/el-dropdown-item》 《/el-dropdown-menu》 《/el-dropdown》 《span》王小虎《/span》 《/el-header》 《el-main》 《router-view》《/router-view》 《/el-main》 《/el-container》 《/el-container》 《/template》 《script》 import axios from "axios"; export default { data() { return { navList: , openList: , pagepath: "/index/users", }; }, watch: { /* 当路由发生变化的时候，就把最新的地址给到pagepath变量 作用是为了保持路由菜单栏的高亮显示 以及解决点击不跳转的bug */ $route: { handler: function (newV) { this.pagepath = newV.path; }, immediate: true, }, }, created: function () { this.getNavList(); }, methods: { getNavList: function () { axios .get("/mock/menu.json", { headers: { Authorization: localStorage.token, }, }) .then((res) =》 { let { data, meta } = res.data; /* 数据获取成功 */ if (meta.status == 200) { this.navList = data; /* 动态添加路由菜单 */ /* 因为第一个路由是默认，所以我们从第二个路由开始动态添加 */ /* slice不会改变原数据 而splice会 */ let arr = this.navList.slice(1,3); /* 循环路由数组 动态添加路由 */ arr.forEach(v =》 { /* 我们尽量使用v.children.path 原因是我们的路径名用的是子路由的 */ /* 如果我们直接写死v.children.path 会导致只有一个子路由路径被动态添加了 如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由 能够被动态的添加 */ v.children.forEach(r=》{ this.$router.addRoute("index", { path: r.path, name: r.path, /* 把名字改成我们页面的名称 例如CategoriesView.vue */ component: () =》 import(`@/views/${r.path.substring(0,1).toUpperCase()+r.path.substring(1)}View.vue`), }); }) }); console.log(this.$router) } else { /* 防止数据获取失败，给出相应的后台提示 */ this.$message.error(meta.msg); } }) .catch((err) =》 { console.log(err); }); }, }, }; 《/script》 《style scoped》 .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } 《/style》
vue 里el-pagination 分页设置全部
vue 里el-pagination 分页设置全部？首先使用el-pagination组件。@size-change在每页数据的个数发生改变时触发。@curren-change在页数发生改变时触发。数据源定义的数据，默认展示第一页，页面数据10条 方法触发时的操作。每页数据个数发生改变时触发handleSizeChange(size)，参数size即是选择的每页数据的数量。页数发生改变时触发handleCurrentChange(current)，current即是选择的页面。在web开发过程中，通常使用表格展示数据，在数据较多时采用分页的方式展示给用户。分页方式有前端假分页和后端分页两种实现方式，此文仅记录前端假分页实现方式。第一步：添加分页组件（el-pagination）在表格下方，添加的代码如下所示：第二步：添加分页所需的变量，如下所示：第三步：添加相应的分页方法，如下所示：第四步：修改查询按钮逻辑，在成功查询后，更新数据的总数量。代码如下所示：第五步：使用slice实现前端的假分页，最终vue文件中的主要代码如下所示：最终效果如下所示：
