1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
| <template> <div id="top"> <el-row :gutter="20"> <card v-for="(item, index) in cardList" :key="index"> <template slot="title">{{ item.name }} </template> <template slot="checkBtn"> <el-radio-group v-model="item.timeType" size="mini" @change="Fn(item.fn)" v-if="item.hasCheck" > <el-radio-button :label="1">月</el-radio-button> <el-radio-button :label="2">季</el-radio-button> <el-radio-button :label="3">年</el-radio-button> </el-radio-group> <el-select v-if="item.hasYear" size="mini" v-model="item.timeType" style="float: right; width: 80px" @change="Fn(item.fn)" > <el-option v-for="item in yearOptions" :key="item" :label="item" :value="item" > </el-option> </el-select> </template> <template slot="content"> <components :is="item.template" :timeType="item.timeType" /> </template> </card> </el-row> </div> </template>
<script> // 这个是使用的组件card const card = () => import("@/components/card/card.vue"); // 下面三个是三个组件,我们需要在card里面分别显示这三个组件 const left = () => import("./components/left.vue"); const middle = () => import("./components/middle.vue"); const right = () => import("./components/right.vue");
export default { props: {}, data() { return { timeType: 1, cardList: [ //没有右边的按钮 { name: "产值统计", template: "left", }, //右边是按钮组 { name: "关键节点", template: "middle", hasCheck: true, fn: "handleChangeTimeMiddle", timeType: 1, //这个是子组件需要的参数 }, //右边是时间选择器 { name: "总产值分析", template: "right", hasYear: true, fn: "handleChangeTimeRight", timeType: "", }, ], yearOptions: [], }; }, created() { this.yearOptions = []; for ( let i = new Date().getFullYear() - 5; i <= new Date().getFullYear(); i++ ) { this.yearOptions.push(i); } console.log("yearOptions", this.yearOptions); this.cardList.forEach((v) => { if (v.hasYear) { v.timeType = this.yearOptions[this.yearOptions.length - 1]; } }); }, methods: { // 执行函数 Fn(fn) { this[fn](); }, // 关键节点切换时间 handleChangeTimeMiddle() { console.log("handleChangeTimeMiddle", this.cardList); }, // 各专业产值占比分析切换时间 handleChangeTimeRight() { console.log("handleChangeTimeRight"); }, }, components: { card, left, middle, right }, }; </script>
|