标签页

默认选中

tab1

tab2

tab3

pane1

pane2

pane3

<g-tabs :selected.sync="selectedTab2" style="background-color: #eee">
  <g-tabs-head>
    <g-tabs-item name="first">tab1</g-tabs-item>
    <g-tabs-item name="second">tab2</g-tabs-item>
    <g-tabs-item name="third">tab3</g-tabs-item>
  </g-tabs-head>
  <g-tabs-body>
    <g-tabs-pane name="first">pane1</g-tabs-pane>
    <g-tabs-pane name="second">pane2</g-tabs-pane>
    <g-tabs-pane name="third">pane3</g-tabs-pane>
  </g-tabs-body>
</g-tabs>

data() {
  return {
    selectedTab2: 'second'
  }
}

禁用 tab 项

tab1

tab2

tab3

pane1

pane2

pane3

<g-tabs :selected.sync="selectedTab3">
  <g-tabs-head>
    <g-tabs-item name="first">tab1</g-tabs-item>
    <g-tabs-item name="second" disabled>tab2</g-tabs-item>
    <g-tabs-item name="third">tab3</g-tabs-item>
  </g-tabs-head>
  <g-tabs-body>
    <g-tabs-pane name="first">pane1</g-tabs-pane>
    <g-tabs-pane name="second">pane2</g-tabs-pane>
    <g-tabs-pane name="third">pane3</g-tabs-pane>
  </g-tabs-body>
</g-tabs>

设置其他内容

tab1

tab2

tab3

pane1

pane2

pane3

<g-tabs :selected.sync="selectedTab4">
  <g-tabs-head>
    <g-tabs-item name="first">tab1</g-tabs-item>
    <g-tabs-item name="second">tab2</g-tabs-item>
    <g-tabs-item name="third">tab3</g-tabs-item>
    <template v-slot:actions>
      <g-button>设置</g-button>
    </template>
  </g-tabs-head>
  <g-tabs-body>
    <g-tabs-pane name="first">pane1</g-tabs-pane>
    <g-tabs-pane name="second">pane2</g-tabs-pane>
    <g-tabs-pane name="third">pane3</g-tabs-pane>
  </g-tabs-body>
</g-tabs>