portal/src/views/management/Advertising/components/Table.vue

<template>
    <el-table
            :data="tableData"
            border
            class="table"
            @selection-change="handleSelectionChange"
            height="auto"
            style="width: 100%">
        <el-table-column
                type="selection"
                fixed
                width="55">
        </el-table-column>
        <el-table-column
                prop="sort"
                label="序号"
                width="360">
        </el-table-column>
        <el-table-column
                prop="codeName"
                label="菜单"
                width="360">
        </el-table-column>
        <el-table-column
                prop="url"
                label="链接"
                :show-overflow-tooltip="true"
                width="360">
            <template slot-scope="scope">
                <a :href="scope.row.url" class="table-link" target="_blank">{{scope.row.url}}</a>
            </template>
        </el-table-column>
        <el-table-column
                prop="pic"
                label="图片"
                width="300">
            <template slot-scope="scope">
                <el-image
                        style="width: 200px;height: 200px"
                        :src="scope.row.pic"
                        :lazy="true"
                        :preview-src-list="scope.row.pic ? [scope.row.pic]: []"
                        fit="contain"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="createUserName"
                label="创建者"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="更新时间"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="updateUserName"
                label="更新者"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                label="操作"
                fixed="right"
        >
            <template slot-scope="scope">
                <el-button type="text" @click="handleEditor(scope.row)">编辑</el-button>
                <el-button type="text" v-if="false" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name:     'Table',
        inject:   {
            tableServiceData:      {
                type:    Object,
                default: () => {
                },
            },
            paginationServiceData: {
                type:    Object,
                default: () => {
                },
            },
        },
        computed: {
            tableData() {
                return this.tableServiceData.myData;
            },
        },
        methods:  {
            handleSelectionChange(data) {
                const arr = [];
                data.forEach(item => {
                    arr.push(item.bnId)
                })
                this.$emit('select-change', arr);
            },
            handleEditor(data) {
                this.$emit('editor', data);
            },
            handleDelete(data) {
                this.$emit('delete', data);
            },
        },
    };
</script>

<style lang="scss" scoped>
.table {
    ::v-deep .is-leaf {
        .cell {
            text-align: center;
        }
    }

    ::v-deep .el-table-column--selection {
        .cell {
            text-align: center;
        }
    }
}
</style>