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

<template>
    <el-table
            :data="tableData"
            border
            class="table"
            height="auto"
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                fixed
                width="55">
        </el-table-column>
        <el-table-column
                prop="title"
                label="标题"
                width="360">
        </el-table-column>
        <el-table-column
                prop="keyword"
                label="关键字"
                width="360">
        </el-table-column>
        <el-table-column
                prop="startTime"
                label="开始时间"
                width="360">
        </el-table-column>
        <el-table-column
                prop="intro"
                label="描述"
                width="360">
        </el-table-column>
        <el-table-column
                prop="newsClassifyName"
                label="新闻分类"
                width="200">
        </el-table-column>
      <el-table-column
          prop="hot"
          label="热门新闻"
          width="200">
      </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="startTime"
                label="发布时间"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="visits"
                label="访问次数"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                label="操作"
                fixed="right"
                width="100"
        >
            <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.iiId)
                })
                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>