element-ui的tabs默认选中页签

Element-UI提供了tabs组件（选项卡、多页签），其中在tabs的属性中提供了一个value/v-model属性来绑定默认选中的页签。

我们通过简单的示例来看一下具体是怎么使用的。

<template><el-tabs v-model="activeTab" @tab-click="tabClick"><el-tab-pane label="我爱你" name="yanggb1">我爱你</el-tab-pane><el-tab-pane label="我好爱你" name="yanggb2">我好爱你</el-tab-pane><el-tab-pane label="我超爱你" name="yanggb3">我超爱你</el-tab-pane><el-tab-pane label="我真的爱你" name="yanggb4">我真的爱你</el-tab-pane></el-tabs>
</template>

这里我将v-model的属性值设置为activeTab，接下来就可以在JavaScript中对这个属性值进行数据绑定。

export default {data() {return {activeTab: 'yanggb2'};}
};

这样，在初始化页面的时候，就会默认选中第二个页签了。

"我不能悲伤地呆在你身旁。"

转载于:https://www.cnblogs.com/yanggb/p/11422529.html

element-ui的tabs默认选中页签相关推荐

Jquery UI Tabs 动态添加页签，并跳转到新页签
需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添加页签(添加多个) 2.tabs动态添加页签后,需要跳转到新添加的页签查找tabs api以及tabs的源码后,发现tabs没有直接实 ...
element ui 的照片墙默认显示照片
element ui的照片墙默认显示照片照片显示的数据格式要是[{name:"",url:""}] file-list = "" 默认显 ...
Vue-element tab选项卡二级页面返回缓存选中页签
需求我的项目里,有个页面是两个选项卡,两个页签里稍有不同,用的组件,然后各个选项卡都有二级详情页,需求就是从二级详情页返回的时候,要返回上次选中的选项卡页签. 思路在elementUI中,有一个默 ...
使用element UI导航菜单默认展开选中子菜单
vue项目中使用的element UI导航菜单:官网例子导航菜单默认展开主要涉及的关键属性: default-active与default-openeds的主要区别: default-active可 ...
html表格选择一行,vue + element table表格如何默认选中第一行
有一个dialog的对话框,我想要在进入对话框的时候默认选中table的第一个页面dialog部分: :model="zzc" :inline="true" ...
Element ui实现tabel分页选中记忆功能
敲重点: :row-key="getRowKeys".:reserve-selection="true" . type="selection" ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
学习笔记--vue Element 下拉框默认选中
步骤: 1.找到el-select v-model 设置val 2.data里面设置一个默认值 <el-select v-model="ruleForm.areaCode"& ...

element-ui的tabs默认选中页签

element-ui的tabs默认选中页签相关推荐

最新文章

热门文章