iview的标签组件Tabs的用法

 <Tabs type="card" closable @on-tab-remove="handleTabRemove"   

@on-click="tabsFun" ref="tabs"

  v-model="activeName" :before-remove="beforeRemove" >

          <TabPane v-for="(item, index ) in dataList" :key="item.productCodeSuffix" :name="item.productCodeSuffix"

            :label="'套装' + item.productCodeSuffix">

            <SuitFormInfo :ref="'formInfo'+index" :dataInfo="item" :isEdit="isEdit"

              @getOrderDetailsList="orderDetailsList(item,index)" />

            <FormSKUInfo :ref="'formSKUInfo'+index" :skuDataList="item.skuList" :isEdit="isEdit" />

          </TabPane>

          <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>

</Tabs>

//tab关闭之前

      beforeRemove() {

        const that = this;

        if (that.dataList.length == 1) {

          return new Promise(function (resolve, reject) {

            that.$Message.warning('不可删除！');

            reject();

          })

        }

      }

//   tab关闭

      handleTabRemove(val) {

        this.dataList = this.dataList.filter(item => item.productCodeSuffix !== val)

        this.activeName = this.dataList[0].productCodeSuffix

      },

//默认展示的tab

init() {

                this.$refs.tabs.activeKey = 'name'

},