<template>
    <div class="xp-table-with-fixed-header">
        <el-table :data="listData" style="width: 100%" v-loading="tableLoading"  max-height="450">
            <el-table-column v-for="(name,key) in labelData" :key="key" :label="name" align="center" min-width="150"
                                header-align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{scope.row[key]}}</template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
/**
 * @file table-with-fixed-header
 * @author liuxiaoning03 <liuxiaoning03@baidu.com>
 * @date 2018-07-09
 */
export default {
    name: 'table-with-fixed-header',
    data() {
        return {
            listData: [],
            tableLoading: true,
             // 表头信息
            labelData: {
                'label': '一级分类',
                'subLabel': '二级分类',
                'showProportion': '展现占比',
                'clickProportion': '点击占比',
                'clickRate': '点击率'
            }

        };
    },
    created() {
        this.getDetailData();
    },
    methods: {
         // 获取数据
        getDetailData() {
            this.tableLoading = false;
            this.$http.get('./table/detailmanage/detaildata', {
                params: {}
            }).then(res => {
                this.listData = res.data;

            });
        }
    }
};
</script>

<style lang="less" src="./index.less">

</style>
