解决vue+element 需求为:多个菜单指向同一个页面,页面的数据是根据选择的菜单来进行动态渲染
问题:1、根据element文档其中tags标签栏属性index代表菜单唯一性、路由地址2、点击菜单页面数据不重新渲染3、点击菜单进页面时没数据(前提:功能都已经全部完成)解决:1、解决菜单唯一性可以在index参数值后面添加参数(“aaa?ID =” +res.data[i].ID)//因为我这里项目的需求只需要把其中一小块动态渲染就可以了,//所以我这里就直接请求的接口然后直接去push在数组
·
问题:
1、根据element文档其中tags标签栏属性index代表菜单唯一性、路由地址
2、点击菜单页面数据不重新渲染
3、点击菜单进页面时没数据(前提:功能都已经全部完成)
解决:
1、解决菜单唯一性可以在index参数值后面添加参数
(“aaa?ID =” +res.data[i].ID)
//因为我这里项目的需求只需要把其中一小块动态渲染就可以了,
//所以我这里就直接请求的接口然后直接去push在数组里面的
数组.push({
key:'3-2-'+[i],
index: '页面name值? 参数名=' + res.data[i].ID,
title:菜单名
})
在另一个页面截取这个地址栏参数的时候可以这样通过:
① location.href 当前的地址去截取
② this.$route.query 这样就可以直接拿到
2、解决切换不同菜单同页面时,页面不重新渲染数据
watch:{
//监听当前地址是否发生变化
$route(newval,oldval){
this.$router.go(0);//刷新
}
},
3、解决功能完成后点击菜单进入没数据
这里其实就是因为<el-tabs v-model="activeName">
这里的activeName这个属性没有初始值导致
这里可以在查询到 labelArr 数据时 给 activeName 这个属性赋默认值就可以了
this.activeName = this.labelArr[0].ID;//保存默认的数据给标签栏
//我这里默认给activeName是因为我是
//根据点击的菜单id传给后端来进行查询的数据
注意: 如果是多个标签栏页面需要动态去渲染,注意监听一下activeName这个属性 如果改变则重新去请求接口查询数据
后端接口就只需要接收你传的数据来进行查询对应的数据
页面标签页是这样色儿滴
<el-tabs v-model="activeName">
<template v-for="Item in labelArr">
<el-tab-pane class="tabPan" :label="Item.菜单名" :name="Item.菜单ID">
内容数据
</el-tab-pane>
</template>
</el-tabs>
动态渲染数据的代码就不贴了哦~~~~
更多推荐
已为社区贡献1条内容
所有评论(0)