【antd-vue】 tab切换前根据情况判断是否允许切换拦截阻断antd-vue tab组件切换

是茜茜啊啊

已于 2023-07-10 17:32:28 修改

阅读量958

点赞数

文章标签： vue.js javascript 前端

于 2023-07-10 17:32:01 首次发布

本文链接：https://blog.csdn.net/weixin_40992252/article/details/131644190

版权

该文章展示了如何在Vue组件中利用a-tabs的插槽和click.stop事件处理方法来控制Tab切换。当点击Tab时，执行clickStop函数进行数据验证。如果验证失败，显示警告并保持当前tabModel不变；否则，更新tabModel并加载新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过插槽solt 和.stop解决

<a-tabs v-model="tabModel"  >
     <a-tab-pane key="3">
         <span slot="tab" @click.stop="clickStop(1)">
                 TAb1
          </span>
      </a-tab-pane>
     <a-tab-pane key="1">
           <span slot="tab" @click.stop="clickStop(2)">
                 TAb2
            </span>
     </a-tab-pane>
     <a-tab-pane key="2">
          <span slot="tab" @click.stop="clickStop(3)">
                TAb3
           </span>
      </a-tab-pane>
 </a-tabs>

在click.stop事件里，判断是否符合的逻辑
例如：

不符合规则给出提出，符合this.tabModel=value

clickStop(value) {
    let preventModel = String(this.tabModel)
    const h = this.$createElement;
    let noVaildArr = []
    this.tableData.forEach((element, index) => {
        if (element.adjustDicId == null || element.adjustDicId == '') {
            noVaildArr.push(h('p', '第' + (index) + '行,不能为空'))
        }
    })
    let str = ''
    if (noVaildArr.length > 0) {
        this.$warning({
            title: '提示',
            content: h('div', {}, noVaildArr),
        });
        this.tabModel = preventModel

    } else {
        this.tabModel = value
        this.loadRightTableData()
        this.treeKey = this.treeKey + 1
    }
},