问题:
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>

动态渲染数据的代码就不贴了哦~~~~

Logo

前往低代码交流专区

更多推荐