• vue3子页面刷新，v-show联合v-if实现柱状图隐藏展示，和按条件查询

    场景：点击按钮控制统计页面是否展示，展开之后展示统计数据的柱状图，并支持按搜索条件搜索，刷新柱状图

     

     

     

    先补充下v-if和v-show知识：可以直接看'--------------''下面内容

    v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除。

    v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

    v-show 由false变为true的时候不会触发组件的生命周期

    v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

    -------------------------------------------------------------------------------------------------------------------------

    也就是说：当你使用v-if的时候，v-if=true也就触发了组件的生命周期，当你想刷新组件内容的时候，必须要销毁这个周期，在重新创建，也就是先false在true

    v-show的话只是进行了隐藏，display：none
     

    这是子页面echarts：

    1. <template>
    2.   <a-card :body-style="{ padding: '10px' }" :head-style="{ padding: '0 10px' }" title="收入分析图" :bordered="false"
    3.     class="card-border-radius">
    4.     <div class="chart-item-container">
    5.       <a-skeleton animation v-if="loading">
    6.         <a-skeleton-line :rows="4" />
    7.       </a-skeleton>
    8.       <template v-else>
    9.         <div ref="payOrderAcctChart" class="chart-item"></div>
    10.       </template>
    11.     </div>
    12.   </a-card>
    13. </template>
    14. <script lang="ts">
    15. import useEcharts from '@/hooks/useEcharts'
    16. import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRefs, reactive } from 'vue'
    17. import { dispose, graphic } from 'echarts/core'
    18. //日期数组
    19. var months = ref([])
    20.  
    21. export default defineComponent({
    22.   name: 'payOrderAcctChart',
    23.   props: {
    24.     dayValue: Array
    25.   },
    26.   setup(props) {
    27.     const loading = ref(false)
    28.     const payOrderAcctChart = ref<HTMLDivElement | null>(null)
    29.     const data = toRefs(props)
    30.     var dayAcct = data.dayValue.value
    31.     console.log(dayAcct?.map(o => { return [o.crtDay].toString() }), '123-------------------')
    32.  
    33.     months = dayAcct?.map(o => { return [o.crtDay].toString() })
    34.  
    35.     const init = () => {
    36.       const option = {
    37.         color: ['rgba(64, 58, 255)'],
    38.         legend: {
    39.           icon: 'rect',
    40.           itemWidth: 30,  // 设置宽度
    41.           itemHeight: 4, // 设置高度
    42.           itemGap: 24, // 设置间距
    43.           data: ['实际收入金额', '支付失败金额', '退款金额'],
    44.           textStyle: {
    45.             //文字样式
    46.             color: '#00000',
    47.             fontSize: '12'
    48.           },
    49.           right: '30%'
    50.         },
    51.         grid: {
    52.           top: '10%',
    53.           left: '2%',
    54.           right: '2%',
    55.           bottom: '5%',
    56.           containLabel: true,
    57.         },
    58.         tooltip: {
    59.           trigger: 'axis',
    60.         },
    61.         xAxis: {
    62.           type: 'category',
    63.           data: months,
    64.           axisLabel: {
    65.             interval: 0  //设置间隔为0
    66.           }
    67.         },
    68.         yAxis: {
    69.           type: 'value',
    70.           max: 3000,
    71.         },
    72.         dataZoom: {
    73.           show: true, // 为true 滚动条出现
    74.           realtime: true,  
    75.           type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
    76.           height: 25, // 表示滚动条的高度，也就是粗细
    77.           start: 0, // 表示默认展示20%～80%这一段。
    78.           end: months.length >6?14:Math.floor(100 / (months.length / 6)),
    79.           bottom: -15
    80.         },
    81.         series: [
    82.           {
    83.             name: '实际收入金额',
    84.             type: 'bar',
    85.             barWidth: '20%',
    86.             data: dayAcct?.map(o => { return ([o.dayRecepitAcct].toString()/100).toFixed(2) })
    87.           },
    88.           {
    89.             name: '支付失败金额',
    90.             type: 'bar',
    91.             barWidth: '20%',
    92.             data: dayAcct?.map(o => { return ([o.dayFailAcct].toString()/100).toFixed(2) })
    93.           },
    94.           {
    95.             name: '退款金额',
    96.             type: 'bar',
    97.             barWidth: '20%',
    98.             data: dayAcct?.map(o => { return ([o.dayRefundAcct].toString()/100).toFixed(2) })
    99.           }
    100.  
    101.         ],
    102.         color: ['#3c5fff', '#e53e3b', '#d1dca9']
    103.  
    104.       }
    105.       setTimeout(() => {
    106.         loading.value = false
    107.         setTimeout(() => {
    108.           nextTick(() => useEcharts(payOrderAcctChart.value as HTMLDivElement).setOption(option))
    109.         }, 100)
    110.       }, 100)
    111.     }
    112.     const updateChart = () => {
    113.       useEcharts(payOrderAcctChart.value as HTMLDivElement).resize()
    114.     }
    115.     onMounted(init)
    116.     onBeforeUnmount(() => {
    117.       dispose(payOrderAcctChart.value as HTMLDivElement)
    118.       // clearInterval(interval)
    119.     })
    120.     return {
    121.       loading,
    122.       payOrderAcctChart,
    123.       updateChart,
    124.     }
    125.   },
    126. })
    127. </script>
    128.  
    129. <style lang="less" scoped>
    130. .chart-item-container {
    131.   width: 100%;
    132.  
    133.   .chart-item {
    134.     height: 38vh;
    135.   }
    136. }
    137. </style>

    父页面引用和操作：

    1.  <div v-if="show">
    2.             <a-row>
    3.               <a-col :span="6">
    4.                 <div class="acctStyle">
    5.                   <a-card title="总金额" hoverable>
    6.                     <span class="fontSize" style="color: #0c94ee">{{ ((dataAcct.totalAcct) / 100).toFixed(2) }}元</span>
    7.                   </a-card>
    8.                 </div>
    9.                 <div class="acctStyle">
    10.                   <a-card class="fontSize" title="实际收入" hoverable>
    11.                     <!-- <span v-if="(dataAcct.recepitAcct/100).toFixed(2)=='NaN'">---</span> -->
    12.                     <span>{{ (dataAcct.recepitAcct / 100).toFixed(2) }}元</span>
    13.                   </a-card>
    14.                 </div>
    15.                 <div class="acctStyle">
    16.                   <a-card class="fontSize" title="退款金额" hoverable>
    17.                     <!-- <span v-if="(dataAcct.refundAcct/100).toFixed(2)=='NaN'">---</span> -->
    18.                     <span style="color: rgba(234,178,12,0.85)">{{ (dataAcct.refundAcct / 100).toFixed(2) }}元</span>
    19.                   </a-card>
    20.                 </div>
    21.                 <div class="acctStyle">
    22.                   <a-card title="支付失败" hoverable>
    23.                     <span :style="{ color: '#1D2129' }" class="fontSize">{{ (dataAcct.failAcct / 100).toFixed(2)
    24.                     }}元</span>
    25.                   </a-card>
    26.                 </div>
    27.                 <div class="acctStyle">
    28.                   <a-card title="总订单数" hoverable>
    29.                     <span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.totalCount }}</span>
    30.                   </a-card>
    31.                 </div>
    32.                 <div class="acctStyle">
    33.                   <a-card title="成功订单数" hoverable>
    34.                     <span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.totalSuccCount }}</span>
    35.                   </a-card>
    36.                 </div>
    37.                 <div class="acctStyle">
    38.                   <a-card title="失败订单数" hoverable>
    39.                     <span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.failCount }}</span>
    40.                   </a-card>
    41.                 </div>
    42.               </a-col>
    43.               <a-col :span="18">
    44.                 <div style="margin:20px" v-if="flushData">
    45.                   <a-space direction="vertical" style="width: 100%">
    46.                     <PayOrderAcctChart ref="payOrderAcctChart" :dayValue="dayIncomeDetail" />
    47.                   </a-space>
    48.                   <a-space direction="vertical" style="width: 100%;padding-top: 20px;">
    49.                     <PayOrderCountChart ref="payOrderCountChart" :dayValue="dayIncomeDetail" />
    50.                   </a-space>
    51.                 </div>
    52.               </a-col>
    53.             </a-row>
    54.           </div>
    1. import { post, get } from '@/api/http'
    2. import { getMerchantList, searchProveniceCityList, getOrderPage, getOrderStatis } from '@/api/url'
    3. import { usePagination, useRowKey, useRowSelection, useTable, useTableColumn } from '@/hooks/table'
    4. import { FormItem } from '@/types/components'
    5. import { before } from 'lodash'
    6. import { onBeforeMount, onBeforeUnmount, h, onMounted, ref, reactive, computed, watch, onBeforeUpdate, onActivated } from 'vue'
    7. import PayOrderAcctChart from './chart/PayOrderAcctChart.vue'
    8. import PayOrderCountChart from './chart/PayOrderCountChart.vue'
    1.    function onSearch() {
    2.       pagination.setPage(1)
    3.       onSearchByPage()
    4.       flushData.value = false
    5.  
    6.       setTimeout(() => { // 此处采用了定时器，并没有采用网上比较常见的nextTick
    7.         flushData.value = true // 设置为true，重新挂载dom
    8.       }, 500)
    9.  
    10.     }

    代码做备份，有时间格式化整理下，简单记录

  • 相关阅读:
    某汽车金融企业：搭建SDLC安全体系，打造智慧金融服务样本
    Android系统恢复出场设置流程分析
    用归并排序算法merge_sort( )求解 逆序对的数量 降低时间复杂度为 nlogn
    python,满分，砝码称重【第十二届】【省赛】【研究生组】
    【Java-----IO流（四）之转换流详解】
    Redis典型应用之分布式锁
    python爬虫入门（一）web基础
    Linux 中如何安全地抹去磁盘数据？
    ZMQ之异步管家模式
    行业早报4.25
  • 原文地址：https://blog.csdn.net/qq_43393995/article/details/126679501