需求:后续操作中会用到tab页签返回来的对象中的其他属性, 直接通过tab-click标签事件返回的实例无法获取到其他的属性
解决办法:在el-tab-pane页签上增加属性 :value=“JSON.stringify(tab)” ,在tab-click标签事件中可以通过 el.$attrs.value 获取到所有的属性,具体代码见下方:
<el-tabs
v-model="activeName"
@tab-click="tabClick"
>
<el-tab-pane
v-for="(tab,index) in tabs"
:key="index"
:label="tab.name"
:name="(index+1)+''"
:lazy="true"
:value="JSON.stringify(tab)"
>
// 页签里的内容,与本文无关
</el-tab-pane>
</el-tabs>
data() {
// const that = this
return {
tabs: [{
name:'111',
id:1111,
type:'type1',
version:1.1
},{
name:'222',
id:2222,
type:'type2',
version:1.2
},{
name:'333',
id:3333,
type:'type3',
version:1.3
}],
activeName: '1'
}
},
methods: {
tabClick(el) {
const currentTab = JSON.parse(el.$attrs.value)
console.log(currentTab)// { name:'111',id:1111, type:'type1', version:1.1 }
}
}