解决vue+element 需求为:多个菜单指向同一个页面,页面的数据是根据选择的菜单来进行动态渲染

11 篇文章 0 订阅

问题:
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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值