Element-UI tabs标签页默认选择第一项
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
需求:
在两层循环体中,采取嵌套的方式获取数据,获取每项的第一个值。
方式:
value / v-model 绑定值,选中选项卡的 name string — 第一个选项卡的 name
方式一:
- 使用:value的方式
- 不直接通过字符串来设置默认选项,使用方法来return数据
方式二:
使用v-model直接绑定每项的第一个值得name
代码如下:
<template>
<div class="again-print">
<div class="tickets-box" v-for="ticketsIndex in imgList" :key="ticketsIndex.id">
<div class="tickets-box_left">
<el-image :src="ticketsIndex.src" style="width: 345px; height: 400px">
左侧图片
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<div class="tickets-box_right">
//方式一 :value="getActiveName(ticketsIndex)" 方式二: v-model="ticketsIndex.tabList[0].name"
<el-tabs type="border-card" :value="getActiveName(ticketsIndex)" @tab-click="tabClicked" >
<el-tab-pane v-for="(item,index) in ticketsIndex.tabList" :key="index" :label="item.label"
:name="item.name" :editable="false" stretch >
{{item.name}}
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
data数据格式:
imgList: [{
id: "1",
src: "https://img0.baidu.com/it/u=4135935889,1539357033&fm=26&fmt=auto&gp=0.jpg",
tabList: [{
name: "0",
label: "1"
},
{
name: "1",
label: "2"
},
{
name: "2",
label: "3"
}
],
},
{
id: "2",
src: "https://img2.baidu.com/it/u=2659844363,756806313&fm=26&fmt=auto&gp=0.jpg",
tabList: [{
name: "3",
label: "4"
},
{
name: "4",
label: "5"
}
],
},
{
id: "3",
src: "https://img2.baidu.com/it/u=996573887,3125077713&fm=26&fmt=auto&gp=0.jpg",
tabList: [{
name: "5",
label: "6"
},
{
name: "6",
label: "7"
},
{
name: "7",
label: "8"
},
{
name: "8",
label: "9"
},
{
name: "9",
label: "10"
},
],
},
],
methods:
getActiveName(ticketsIndex){
console.log(ticketsIndex.tabList[0].name);
// 默认选择第一项
return ticketsIndex.tabList[0].name;
},
tabClicked(tab, event) {
console.log(tab);
// console.log(tab.$options.propsData);
console.log(tab.name);
this.getActiveName = tab.name
console.log(tab.index);
console.log(event);
},
展示图片:
最后:
第一次撰写博客,记录下自己的踩坑点,如有不足,欢迎指出~
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)