问题:
上图是一个tab,用的vuex中的组件,很明显的一个问题就是下面的下标位置不对。
打开控制台看样式,应该是默认进页面的时候,会去计算初始位置。
以上的tab选项卡的数据是接口请求回来的
tabList:[]
this.tabList=res.data;
这两句赋值代码应该是很熟悉了。贼6。
由于接口中,没有返回“全部”,所以,是自己拼接进去的
this.tabList.unshift({name:'全部',id:0})
这个也很好理解,但是下标位置依然不对。
突然回想起来,当初自己造数据来测试的时候,默认给的tabList
tabList: ["全部", "建档", "促排", "取 卵", "移植", "保胎"],
然后把初始数据填上,奇迹般的欧克了。。。
所以最终的结构,应该是这样的
//初始化数据
tabList: ["全部", "建档", "促排", "取卵", "移植", "保胎"]
//请求接口赋值
res.data.unshift({name:"全部",id:0})
this.tabList=res.data;
//然后你的tabList就可以完美的渲染上去了,牛皮!
也算踩坑吧。
==============================
这个应该是初始化渲染的时候,毕竟请求接口是需要时间的,但是默认下标已经去计算完了,接口数据还没有返回,导致的下标位置对(我猜的)
然后又去试了一下,发现初始化的时候,tabList只要给2个以上的值,就可以了,而且什么值都无所谓,如下:
//初始化数据(随便给2个就好了,给一个还不行)
tabList: [0,0]