fix:修改表格高度问题

ZhangXianQiang

2024-02-29 b1100ae06eb22cc825cab42611d772468948ab95

 src/views/daoAnOffice/right/danger/index.vue

@@ -4,34 +4,42 @@
  <RightTitle title="安全隐患情况">
    <template #top>
      <div class="select-container flex">
        <div class="item whitespace-no-wrap cursor-pointer" v-for="item in selectItems" :key="item.itemIndex">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{'select-active': item.isActive}" v-for="item in selectItems" :key="item.itemIndex"
          @click="changeSelect(item)">
          {{ item.name }}
        </div>
      </div>
    </template>

    <template #content>
      <InfoView v-show="isActive"></InfoView>
      <DataView v-show="!isActive"></DataView>
      <InfoView :key="selectItems[0].itemIndex" v-show="selectItems[0].isActive"></InfoView>
      <DataView :key="selectItems[1].itemIndex" v-show="selectItems[1].isActive"></DataView>
      <!-- <TransitionGroup name="fade" mode="out-in">
        
      </TransitionGroup> -->
    </template>

  </RightTitle>
</template>

<script setup lang="ts">
<script setup>

import RightTitle from "@/components/right-title";
import DataView from './dataView.vue';
import InfoView from './infoView.vue';
import { ref } from 'vue';

let isActive = ref(true);

const selectItems = ref([
  { itemIndex: 1, name: '安全隐患', isActive: false },
  { itemIndex: 2, name: '数据统计', isActive: true },
]);


const changeSelect = (selectItem) => {
  selectItems.value.map(item => item.isActive = false);
  selectItem.isActive = true;
}

</script>

@@ -47,10 +55,26 @@
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
}

.select-active {
 color: #fff; 
}

.item:last-child {
  margin-right: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transition: opacity 0.5s;

}
</style>