<!-- * @Author: your name * @Date: 2022-03-08 17:28:57 * @LastEditTime: 2022-03-28 17:20:55 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue --> <template> <div class="monitorData"> <div class="iconfont"> <div v-for="(item, index) in changeIcon" :key="item.class" :class="[item.class, { active: isCom == index }]" @click="isComChange(index)" ></div> </div> <transition name="fade-transform" mode="out-in"> <keep-alive> <component :is="currentTabComponent"></component> </keep-alive> </transition> </div> </template> <script> import charsData from "./component/charsData"; import tabledata from "./component/tableData"; export default { data() { return { // currentTabComponent: tabledata, changeIcon: [{ class: "icon-b" }, { class: "icon-a" }], isCom: 1, }; }, computed: { currentTabComponent() { return this.isCom == 0 ? charsData: tabledata; }, }, methods: { isComChange(index) { this.isCom = index; }, }, }; </script> <style lang="scss" scoped> @import url("~@/assets/iconfont/monitorData/iconfont.css"); .iconfont { display: flex; justify-content: right; margin-right: 37px; padding-top: 15px; div { cursor: pointer; padding: 4px; &.active, &:hover { background-color: #666666; color: #fff; } } .icon-b { margin-right: 23px; } } </style>>