在Vue 2 + Element UI 的环境下，如果你遇到了在切换 Tabs 时想要显示的表格能够高亮选中行的问题，可能是由于以下几个原因造成的：
- 高亮选中行的逻辑没有放置在正确的生命周期钩子或者正确的事件处理函数中。
- 高亮逻辑依赖于某些数据或状态的初始化，而这些数据或状态在 Tabs 的切换过程中没有得到正确更新。
- 表格高亮选中行的逻辑有错误，可能是由于引用了错误的行数据或者没有正确设置表格的
highlight-current-row属性。
解决方法：
- 确保高亮逻辑放置在正确的生命周期钩子或者事件处理函数中，如
mounted、activated（如果使用的是vue-router）。 - 在 Tabs 的切换事件中更新相关数据或状态，并调用表格的更新方法。
- 检查表格的
highlight-current-row属性是否已经设置为true，并且确保你的高亮逻辑没有错误。 - 如果你使用了 Vuex 来管理状态，确保状态的变化被正确地响应并传递到表格组件。
示例代码：
<template>
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="用户管理" name="first">
<el-table
:data="userTableData"
highlight-current-row
:row-class-name="tableRowClassName"
@row-click="handleRowClick">
<!-- 表格列定义 -->
</el-table>
</el-tab-pane>
<!-- 其他 Tabs -->
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first',
userTableData: [],
currentRow: null
};
},
methods: {
handleTabClick(tab, event) {
// 在这里更新表格数据
this.fetchTableData();
},
fetchTableData() {
// 模拟 API 请求获取表格数据
this.userTableData = [/* 数据 */];
},
tableRowClassName({ row, rowIndex }) {
if (row === this.currentRow) {
return 'current-row';
}
return '';
},
handleRowClick(row, column, event) {
this.currentRow = row;
}
},
mounted() {
this.fetchTableData();
}
};
</script>在这个例子中，我们监听了 tab-click 事件来处理 Tabs 的切换，并且在 handleTabClick 方法中更新了表格数据。我们还定义了 currentRow 来存储当前选中的行，并且使用了 tableRowClassName 方法来动态绑定行的类名，以便于我们可以通过 CSS 来高亮选中的行。最后，在 handleRowClick 方法中设置了当前选中行。