选项卡

例子

选项卡 - 图1

  1. <avue-tabs :option="option" @change="change">
  2.   <template slot="before">
  3.     <el-tag>卡槽头部{{type}}</el-tag>
  4.   </template>
  5.   <template slot="user">
  6.     <avue-crud :option="item.option" :data="data"></avue-crud>
  7.   </template>
  8.   <template slot="shanghu">
  9.     <avue-form :option="item.option" v-model="form"></avue-form>
  10.   </template>
  11.   <template slot="weixin">
  12.     <avue-form :option="item.option" v-model="form"></avue-form>
  13.   </template>
  14.   <template slot="qq">
  15.     <avue-form :option="item.option" v-model="form"></avue-form>
  16.   </template>
  17.   <template slot="after">
  18.     <el-tag>卡槽尾部{{type}}</el-tag>
  19.   </template>
  20. </avue-tabs>
  22. <script>
  23. export default {
  24.  data() {
  25.       return {
  26.          type:0,
  27.          item:{},
  28.          form:{},
  29.          data:[
  30.             {
  31.               username:'smallwei',
  32.               password:123456,
  33.               type:123
  34.             },
  35.             {
  36.               username:'avue',
  37.               password:123456,
  38.               type:123
  39.             }
  40.          ],
  41.          option:{
  42.            column: [{
  43.               label: '用户信息',
  44.               prop: 'user',
  45.               icon: 'el-icon-date',
  46.               option: {
  47.                   page:false,
  48.                   menuWidth:300,
  49.                   column: [{
  50.                           label: "用户名",
  51.                           prop: "username",
  52.                           rules: [{
  53.                               required: true,
  54.                               message: "请输入用户名",
  55.                               trigger: "blur"
  56.                           }],
  57.                       },{
  58.                           label: "密码",
  59.                           prop: "password",
  60.                           type:'password'
  61.                       },{
  62.                           label: "自定义字段",
  63.                           prop: "type",
  64.                           type:'type',
  65.                           solt:true
  66.                       }
  67.                   ]
  68.               }
  69.           }, {
  70.               label: '商户信息',
  71.               prop: 'shanghu',
  72.               icon: 'el-icon-picture',
  73.               option: {
  74.                   submitText: '完成',
  75.                   column: [{
  76.                       label: "商户名称",
  77.                       prop: "owName",
  78.                       rules: [{
  79.                           required: true,
  80.                           message: "请输入商户名称",
  81.                           trigger: "blur"
  82.                       }],
  83.                   }]
  84.               }
  85.           }, {
  86.               label: '微信信息',
  87.               prop: 'weixin',
  88.               icon: 'el-icon-picture-outline',
  89.               option: {
  90.                   submitText: '完成',
  91.                   column: [{
  92.                       label: "微信名称",
  93.                       prop: "weixinName",
  94.                       rules: [{
  95.                           required: true,
  96.                           message: "请输入微信名称",
  97.                           trigger: "blur"
  98.                       }],
  99.                   }]
  100.               }
  101.           }, {
  102.               label: 'QQ信息',
  103.               prop: 'qq',
  104.               disabled: true,
  105.               icon: 'el-icon-share',
  106.               option: {
  107.                   submitText: '完成',
  108.                   column: [{
  109.                       label: "QQ名称",
  110.                       prop: "qqName",
  111.                       rules: [{
  112.                           required: true,
  113.                           message: "请输入QQ名称",
  114.                           trigger: "blur"
  115.                       }],
  116.                   }]
  117.               }
  118.           }]
  119.         }
  120.       }
  121.     },  
  122.     methods: {
  123.      change (item) {
  124.        this.type = item.prop
  125.        this.item = item;
  126.        this.$message.success('当前选项卡对象'+JSON.stringify(item))
  127.      },
  128.     }
  129. }
  130. </script>

Avue-tabs Option Attributes

参数说明类型可选值默认值
label选项卡显示名称String--
prop选项卡别名String--
description选项卡描述String--
icon选项卡图标String--

Avue-tabs Events

事件名说明参数
change返回当前选项卡的整体对象item

Avue-tabs Methods

方法名说明参数
changeTabs传入标签的序号即可切换active

Avue-tabs Scoped Slot

name说明
after内容之前的卡槽
brfore内容之后的卡槽
说明每个选项卡的卡槽