zoukankan      html  css  js  c++  java
  • 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'
    },
  • 相关阅读:
    VC++ 在Watch窗口显示GetLastError值以及详细信息
    VC++ Debug内存值
    VC++ 给你的代码强制加一个硬断点
    wchat_t与char互转
    使用forever运行nodejs应用
    C++ 检查Windows服务运行状态
    【转】Android横竖屏重力自适应
    可配置多功能门 SN74LVC1G57, 1G58, 1G97, 1G98, 1G99
    VPW协议解析
    STM32的TAMPER-RTC管脚作为Tamper使用
  • 原文地址:https://www.cnblogs.com/wssdx/p/12890172.html
Copyright © 2011-2022 走看看