vue el-tabs当有数据的时候做一个消息提醒

您可以通过监听数据变化来实现消息提醒。具体操作如下：

1. 在 el-tabs 中为每个 tab 加上一个自定义的类名，例如 "has-data"。

2. 监听数据变化，当有数据时，为含有数据的 tab 添加一个新的类名 "has-message"。

3. 在 CSS 文件中定义 "has-message" 类名对应的样式，例如添加一个小红点或者显示一个未读消息数。

示例代码如下：

<el-tabs>
  <el-tab-pane label="Tab 1" name="tab1" class="has-data">
    <!-- Tab 1 content -->
  </el-tab-pane>
  <el-tab-pane label="Tab 2" name="tab2" class="has-data">
    <!-- Tab 2 content -->
  </el-tab-pane>
  <el-tab-pane label="Tab 3" name="tab3" class="has-data">
    <!-- Tab 3 content -->
  </el-tab-pane>
</el-tabs>

<script>
export default {
  data() {
    return {
      tabData: [
        {
          name: 'tab1',
          data: []
        },
        {
          name: 'tab2',
          data: [{}, {}, {}]
        },
        {
          name: 'tab3',
          data: []
        }
      ]
    }
  },
  watch: {
    tabData: {
      handler(val) {
        val.forEach(tab => {
          const el = document.querySelector(`.el-tabs__item[name="${tab.name}"]`)
          if (tab.data.length > 0) {
            el.classList.add('has-message')
          } else {
            el.classList.remove('has-message')
          }
        })
      },
      deep: true
    }
  }
}
</script>

<style>
.el-tabs__item.has-message::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  margin-right: 4px;
}
</style>

以上代码实现了在含有数据的 tab 上显示一个小红点的效果。您可以根据需求自行修改样式。