sport_mobile/.svn/pristine/83/8313a9243a57739d06b871fc4c99ccfd655a1311.svn-base

<template>
    <div class="baseball">
        <div v-if="baseball.length == 0" class="no-message">暂无数据</div>
        <div v-for="(item, index) of baseball" :key="index">
            <el-table  :data="item.match_data">
                <el-table-column type="expand" style="border: none">
                    <template slot-scope="props">
                        <div v-if="props.row.play_data.length > 2">
                        <div style="padding: 8px 8px;margin: 0 auto">
                            <div style="font-weight:bold;">结果：</div>
                            <div style="margin-left: 40px;line-height: 28px;" v-for="(res, index) of props.row.play_data" :key="index">
                                <div v-if="index < props.row.play_data.length -2">{{res.play_name}}：{{res.play_result}}</div>
                            </div>
                        </div>
                        </div>
                        <div v-else style="text-align:center">暂无数据</div>
                    </template>
                </el-table-column>
                <el-table-column :label="item.league_name" width="400" align="center" style="border-left:none">
                    <template slot-scope="scope">
                        {{scope.row.match_time}}
                        <span style="width: 400px;font-weight:bold">
                            {{scope.row.home_team}}
                            <span style="color: #ff9200">VS</span>
                            {{scope.row.guest_team}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="第1局至第五局" align="center" prop="score_result"></el-table-column>
                <el-table-column label="全场" align="center" prop="score_result"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'baseball',
        props: {
            baseballData: {
                type: Array,
                default: ()=>[]
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                baseball: [],
                bsLoading: false,
                show: true,
                test: '1'
            }
        },
        watch: {
            baseballData: {
                handler(val) {
                    if(val) {
                        this.baseball = JSON.parse(JSON.stringify(val))
                    }
                },
                deep: true
            },
            loading(val) {
                this.bsLoading = val
            }
        },
        methods: {
            // 默认展开
            initShow() {
                for(let item of this.baseball) {
                    item.show = !item.show;
                }
            },
            setShow(val, index) {
                val.show = !val.show
            },
        }
    }
</script>
<style>
    .baseball .el-table {
        border-top: none;
    }
    .baseball .el-table th {
        padding: 8px 0;
        background-color: #373737;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
    }
    .baseball .sec-table .el-table th {
        padding: 4px 0;
        background-color: #e3e3e3;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
    }
    
    .baseball .el-table td {
        padding: 6px 0;
    }
    .baseball .el-table--border th {
        border: none;
    }
</style>
<style scoped>
    .no-message {
        text-align: center;
        margin-top: 50px;
        padding-right: 100px;
        font-size: 16px;
        font-weight: 700;
    }
</style>