jiaoyi-vue/src/views/manage/finance/bills/index.vue

<template>
    <el-container class="flex-column">
        <div class="table-search">
            <div class="first-title">财务对账</div>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                <el-tab-pane label="日汇总" name="day"></el-tab-pane>
                <el-tab-pane label="月汇总" name="mon"></el-tab-pane>
                <el-tab-pane label="自定义汇总" name="custom"></el-tab-pane>
            </el-tabs>
            <search @success="handleSuccess" :type="elType"></search>
        </div>
        <el-main class="nopadding">
            
        </el-main>
    </el-container>
</template>

<script>
import search from './components/search';
export default {
    components: {
        search
    },
    data() {
        return {
            activeName:"day",
            elType:"1"
        }
    },
    methods: {
        handleClick(event){
            this.activeName = event;
            if (event=='mon') {
                this.elType = 2
            } else {
                this.elType = 1
            }
        },
        handleSuccess(){
            
        }
    }
}
</script>

<style>
.table-search{border-bottom: 0;}
.first-title{
    align-items: center;
    color: #1d2129;
    display: flex;
    font-size: 20px;
    font-weight: 600;
    justify-content: space-between;
    line-height: 28px;
    margin-bottom: 20px;}
</style>