<template>
<div class="logmangement">
<!-- 上面按钮-->
<div class= "buttontop" >
<el-form class="button">
<el-button @click="loginlog" :type="button11" size="mini">登录日志</el-button>
<el-button @click="managementlog" :type="button22" size="mini">操作日志</el-button>
</el-form>
</div>
<!-- 组件-->
<div>
<component :is="currentComponent"></component>
</div>
</div>
</template>
<script>
import LogManagements from "./LogManagements";
import LoginLog from "./LoginLog";
export default {
name: "LogManagement",
components: {LogManagements,LoginLog},
data(){
return{
currentComponent:'LoginLog',
button11:"primary",
button22:""
};
},
methods:{
loginlog(){
this.currentComponent = 'LoginLog';
this.button11="primary";
this.button22=""
},
managementlog(){
this.currentComponent = 'LogManagements';
this.button22="primary";
this.button11=""
},
}
}
</script>
<style scoped>
</style>
VUE 实现动态组件
最新推荐文章于 2024-06-03 13:30:00 发布