qimall/backend/modules/mall/views/census/components/my-table.php

<template id="my-table">
    <div class="my-table">
        <div class="my-table-header" flex>
            <div v-for="(header,index) in headerList" :key="index" :style="getHeaderStyle(header)">
                <div>{{header.label}}</div>
            </div>
        </div>

        <div class="list-contain" v-infinite-scroll="onReachBottom">
            <div class="list-content" v-for="(item,i) in data" flex :style="getRow()" :key="i">
                <div v-for="(header,j) in headerList" :key="j" :style="getContentStyle(header)">
                    <slot v-if="header.slot" :name="header.slot" :index="i" :item="item"></slot>
                    <!-- <slot v-if="header.goods_name" :name="header.slot" :index="i" :item="item"></slot> -->
                    <div v-else-if="header.props == 'goods_name'" flex>
                        <el-image class="list-goods-img" :src="item.cover_pic" fit="cover"></el-image>
                        <div class="over1">{{item[header.props]}}</div>
                    </div>
                    <div v-else>{{item[header.props]}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('my-table', {
        name: "my-table",
        template: '#my-table',
        props: {
            data: {
                type: Array,
                required: true,
                default () {
                    return []
                }
            },
            options: {
                type: Array,
                required: true,
                default () {
                    return []
                }
            },
            vertical: {
                type: String,
                default: '',
            }
        },
        data() {
            return {}
        },
        computed: {
            headerList() {
                let headerList = this.options.map(item => {
                    const {
                        props,
                        label,
                        width,
                        textAlign,
                        slot
                    } = item
                    let result = {
                        width,
                        props,
                        label,
                        textAlign: textAlign
                    }
                    if (slot) {
                        result.slot = props
                    }
                    return result
                })
                console.log(headerList, "headerList");

                return headerList
            }
        },
        methods: {
            onReachBottom() {
                this.$emit("onReachBottom")
            },
            getHeaderStyle(header) {
                const width = header.width || 0
                const padding = `10px 0 `
                const textAlign = header.textAlign || 'center'
                let result = {
                    width: `${width}px`,
                    padding,
                    textAlign,
                    borderBottom: '1px solid #fff'
                }
                if (!width)(result.flex = 1)
                return result
            },
            getContentStyle(header) {
                const width = header.width || 0
                const padding = `20px 0 0 0`
                const textAlign = header.textAlign || 'center'
                let result = {
                    width: `${width}px`,
                    padding,
                    textAlign,
                }
                if (!width)(result.flex = 1)
                return result
            },
            getRow() {
                const vertical = this.vertical || 'center'
                let result = {
                    'align-items': vertical
                }
                return result
            }
        }
    });
</script>
<style>
    .my-table {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .list-contain {
        flex: 1;
        overflow-y: scroll;
    }

    .list-goods-img{
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-right: 12px;
        border-radius: 4px;
    }
</style>