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);

			},

展示图片:

在这里插入图片描述

最后:

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

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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐