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'
};
}
};
这样,在初始化页面的时候,就会默认选中第二个页签了。
"我不能悲伤地呆在你身旁。"
element-ui的tabs默认选中页签的更多相关文章
- [转] JQuery UI Tabs 动态添加页签,并跳转到新页签
[From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...
- element ui的照片墙 默认显示照片
参考地址: element ui的照片墙 默认显示照片 照片显示的数据格式是:[{name: '', url: ''}],:file-list=""默认显示的图片 实际项目开发中需 ...
- bootstrap tabs 默认tab页的使用方式
HTML中引入tabs如下: <ul class="nav"> <li><a href="#a" tt="A.html& ...
- element UI select 设定默认值
要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...
- element ui中表格table翻页记忆勾选状态
<el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...
- element ui框架把el-select选中的value设置为对象
- WPF如何实现一个漂亮的页签导航UI
最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下.经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现.下面介绍一下主要的思路: 1 U ...
- element UI排坑记(一):判断tabs组件是否切换
之所以将这个问题列在排坑记之中,是因为官方组件的一个属性颇有些隐蔽,这个问题曾经折腾了本人较多时间,始终思维固着,且使用搜索引擎也不容易搜索到答案,故记之.然而实际解决却是相当简单的. 一.问题描述 ...
- JavaScript选项卡/页签/Tab的实现
选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...
随机推荐
- .NET 使用OLEDB导入Excel数据
/** * *在本章节中主要讲解的是如何使用OLEDB将Excel中的数据导入到数据库中 * */using System; using System.Data; using System.Data. ...
- Linux问题记录——主机名变成了bogon
Linux问题记录——主机名变成了bogon 摘要:本文主要记录了主机名变成bogon的原因以及解决办法. 问题重现 主机名在一次登录后,变成了bogon,此后每次登录Linux系统时都是bogon. ...
- 为什么要学 Python? python该怎么学
很多童鞋对为什么学习Python感到迷茫,小编来跟大家说说学习Python的10个理由,希望可以帮助到大家!!! 摘要: 看完这十个理由,我决定买本python从入门到精通! 如果你定期关注现今的科技 ...
- sqlserver 问题来了,视图不会自动更新,如果是用*创建的
奇葩问题一个 create view时候用的select * 关联了几个表创建的. 后修改select * 的表,结果悲剧了. select * from 视图得到的结果绝对让你想哭.不报错,不提示 ...
- 深入浅出js实现继承的7种方式
给大家介绍7中js继承的方法 有些人认为JavaScript并不是真正的面向对象语言,在经典的面向对象语言中,您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类(参考C++ inherita ...
- Android Studio当中的创建新方法的快捷键该如何使用?
当有红线出现的时候,我们的代码并没有编译出错,则需要输入alt+enter则可以得到相应的神奇效果了.这个方法我竟然今天才知道,也真是丢脸了.比如说我们书写了一个新的没有创建的方法,我们直接输入alt ...
- linux内核 mtd分区
首先 内核配置需要打开MTD选项 Memory Technology Devices (MTD) ---> 如果是NOR Flash,需要选择Common Flash Interface (CF ...
- Swift 字典模型互转总结
现在很多iOS项目的开发开始转向Swift语言. 相信 Swift语言很快会成为iOS工程师 必备技能. 字典转模型, 模型转转字典在开发过程中扮演非常重要的角色. 今天就和大家分享一下使用Swift ...
- nfs共享文件系统
NFS服务简介 NFS 就是 Network FileSystem 的缩写,最早之前是由sun 这家公司所发展出来的. 它最大的功能就是可以透过网络,让不同的机器.不同的操作系统.可以彼此分享个别的档 ...
- [Php] windows下使用composer出现SHA384 is not supported by your openssl extension
composer的版本太低了,需要更新composerwindows的安装使用https://getcomposer.org/Composer-Setup.exe报这个错Failed to decod ...