解决Vue对Element中的el-tab-pane添加@click事件无效

文章目录

• • 概要
  • 技术细节

概要

在写项目过程中引入了el-tabs，但是想给每个pane选项绑定事件的时候无效，因此去查找了原因发现官方文档只提供了关于tab的点击事件，而tab-pane没有点击事件，因此需要在el-tabs中设置点击事件来获取点击了哪个tab。

技术细节

  <el-tabs @tab-click="handleTabClick" type="border-card" stretch>
        <el-tab-pane label="进行中" min-width="24%">
        </el-tab-pane>
        <el-tab-pane label="已结束" min-width="24%">
        </el-tab-pane>
   </el-tabs>


handleTabClick(tab, event) {
      if (tab.index == 0) {
        this.index = 0
        this.reset()
      }
      else if (tab.index == 1) {
        this.index = 1
        this.reset()
      } else if (tab.index == 2) {
        this.index = 2
        this.reset()
      }

    },