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'
},


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM