el-tabs / el-tab-pane Tabs标签页


element-ui/vue入门到精通-开发框架文库

Tabs标签页:el-tabs / el-tab-pane 

 

HTML 全选
    <el-tabs v-model="activeName"
             type="border-card"
             @tab-click="handleClick">
      <el-tab-pane label="客户资料查询"
                   name="customerList"
                   :disabled="b_customerListPage">

      </el-tab-pane>
      <el-tab-pane label="客户详情"
                   name="customerDetail"
                   :disabled="b_customerDetailPage">

      </el-tab-pane>
    </el-tabs>

 

JavaScript 全选
export default {
  data () {
    return {
      activeName: 'customerList', // 当前页的名称,查询页面
      b_customerListPage: false,
      b_customerDetailPage: true,
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    }
}

重点:

 activeName: 'customerList', // 当前页的名称,查询页面

disabled: true:禁用标签页

页面预览

el-tabs / el-tab-pane Tabs标签页

切换标签页

el-tabs / el-tab-pane Tabs标签页

 

Tabs Attributes

参数说明类型可选值默认值
value / v-model绑定值,选中选项卡的 namestring第一个选项卡的 name
type风格类型stringcard/border-card
closable标签是否可关闭booleanfalse
addable标签是否可增加booleanfalse
editable标签是否同时可增加和关闭booleanfalse
tab-position选项卡所在位置stringtop/right/bottom/lefttop
stretch标签的宽度是否自撑开boolean-false
before-leave切换标签之前的钩子,若返回 false 或者返回 Promise 且被 reject,则阻止切换。Function(activeName, oldActiveName)

Tabs Events

事件名称说明回调参数
tab-clicktab 被选中时触发被选中的标签 tab 实例
tab-remove点击 tab 移除按钮后触发被删除的标签的 name
tab-add点击 tabs 的新增按钮后触发
edit点击 tabs 的新增按钮或 tab 被关闭后触发(targetName, action)

Tab-pane Attributes

 

参数说明类型可选值默认值
label选项卡标题string
disabled是否禁用booleanfalse
name与选项卡绑定值 value 对应的标识符,表示选项卡别名string该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1'
closable标签是否可关闭booleanfalse
lazy标签是否延迟渲染booleanfalse

vscode-开发框架文库

版权声明:本文为开发框架文库发布内容,转载请附上原文出处连接
C/S框架网
评论列表

发表评论

评论内容
昵称:
关联文章

el-tabs / el-tab-pane Tabs标签
DevExpress XtraTable组件调整TabPage标签的顺序
隐藏界面的明细编辑【数据编辑】
Element-UI el-button按钮组件
使用SendKeys.Send发送Tab键代替SelectNextControl()方法
基础资料分:默认分,但增加一个不分的功能
VUE+Element-UI入门到精通:客户详情资料编辑及提交数据
robots.txt 指定 Sitemap.xml的位置和robots Meta标签[转]
Vue el: '#app' 与 .$mount('#app')区别,#app作用
使用HtmlAgilityPack.HtmlDocument彻底清除HTML标签
数据编辑禁止刷新数据
SQL分查询多种写法
HtmlAgilityPack编程 - 使用DocumentNode.InnerText去除HTML标签
C#.NET iTextSharp生成PDF文件源码大全(生成表格、透明水印,脚页眉页码等)
CSFrameworkV6旗舰版-数据查询设计
数据查询支持两种数据展示方式
Vue启动自定义面,Editor.vue
标签:C# Winform+WebService+三层C/S结构快速开发平台
代码生成器 CodeGenerator V6.1 - 提供两种生成报表策略(表格/标签,TableObject/TextObject)
为什么主窗体下面的窗体列表标签没有关闭[X]按钮?