1.vue 可以通过 component 元素加一个特殊的 is 来实现组件的动态切换
html:
<ul class='tabs'>
<li
v-for='item in tabList'
:key='item.name'
:class='{actived: currentTab===item.value}'
@click='changeTab(item)'
>
{
{ item.name }}
</li>
</ul>
<component :is='currentTab'></component>
js:
components: {
DepartmentList, PersonList, TrainList,
},
data () {
return {
currentTab: 'department-list', // 默认选中部门管理
tabList: [
{ name: '部门管理', value: 'department-list' },
{ name: '人员管理', value: 'person-list' },
{ name: '培训管理', value: 'train-list' },
],
}
},
methods: {
// 切换选中状态
changeTab (row)