elementui tab切换不高亮显示

可能是因为你没有设置 active-class 属性。可以在 el-tabs 标签上添加 active-class 属性，例如：

<el-tabs active-class="active-tab">
  <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
  <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
</el-tabs>

然后在 CSS 中定义 .active-tab 类的样式即可：

.active-tab {
  background-color: #f0f0f0;
}

相关问题

elementui tab原理

ElementUI中的Tab组件基于Vue.js框架开发，其原理是通过Vue组件的数据驱动来实现。

具体来说，Tab组件包含一个Tab栏和多个Tab内容区域。Tab栏由多个Tab选项卡组成，每个选项卡包含一个标题和一个对应的内容区域。当用户点击某个选项卡时，对应的内容区域会显示出来，其他内容区域则隐藏。

在Vue组件中，Tab栏和Tab内容区域都是组件的子组件，采用插槽（slot）来实现。通过父组件向子组件传递props属性，子组件根据这些属性来渲染不同的样式和内容。同时，组件内部也可以通过监听事件来实现用户的交互操作，例如用户点击某个选项卡时触发的事件。

总的来说，ElementUI的Tab组件通过Vue组件的数据驱动和事件监听机制来实现选项卡切换和内容显示隐藏的功能。

elementui tabs切换页面数据会清空

当使用elementui的tabs组件进行切换时，每次切换都会重新渲染相应的内容。如果不保存之前的数据，那么会出现数据被清空的情况。你可以考虑在每次切换tab时，将之前的数据保存到一个数组或者对象中，这样切换回来时就可以重新渲染之前保存的数据了。另外，你也可以使用keep-alive组件来缓存组件状态，这样切换回来时就不会重新渲染了，从而避免了数据被清空的问题。