Element-UI tabs标签页默认选择第一项

需求：

在两层循环体中，采取嵌套的方式获取数据，获取每项的第一个值。

方式：

value / v-model 绑定值，选中选项卡的 name string — 第一个选项卡的 name

方式一：

1. 使用:value的方式
2. 不直接通过字符串来设置默认选项，使用方法来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);

			},

展示图片:

最后：

第一次撰写博客，记录下自己的踩坑点，如有不足，欢迎指出~