m3graph/src/components/search/perf.vue

<template>
    <div class="container" v-if="dt && dt.rows.length>0">
        <div>
            <el-button type="text" icon="el-icon-warning"> {{dt.title}}</el-button>
        </div>   
        <template v-for="(chart,index) in dt.rows">
            <lineChart :model="chart" :key="index" v-if="chart.show"></lineChart>
        </template>
    </div>
</template>

<script>
import lineChart from './lineChart.vue';
import _forEach from 'lodash/forEach';
import _filter from 'lodash/filter';

export default{
    props:{
        dt:Object
    },
    components:{
        lineChart
    },
    watch:{
        'dt.rows':{
            handler(val){

                if(val.length === _filter(val,{show:false}).length ){
                    this.dt.show = false;
                }
            },
            deep:true
        }
    }
}
</script>

<style scoped>
    .container{
        padding: 20px;
        background: #f2f2f2;
    }
    .chart-container{
        padding: 20px;
        background: #ffffff;
    }
</style>