elmentui 表格封装

<template>
    <!-- 表格组件 -->
    <el-table
        ref="table"
        v-loading="tableLoading"
        class="customer"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="_headerCellStyle"
        v-bind="{ ...config }"
        @selection-change="onSelectChange"
        :height="height"
        :row-key="rowKey">
        <!-- 循环表头数据，判断列显示类型 -->
        <template v-for="col in tableHeader">
            <!-- 多选框 -->
            <el-table-column :reserve-selection="reserveSelection" v-if="col.type == 'selection'" :key="col.prop" :label="col.label" :type="col.type" :width="col.width" />
            <!-- 索引行 -->
            <el-table-column v-else-if="col.type == 'index'" :key="col.prop + 1" :label="col.label" :type="col.type" :width="col.width" />
            <!-- 图片 -->
            <el-table-column v-else-if="col.type == 'image'" :key="col.prop + 2" :label="col.label" :width="col.width">
                <template slot-scope="scope">
                    <div v-for="(v,index) in setUrl(scope.row[col.prop])" :key="index" class="content-image">
                        <el-image class="img" :src="v" :preview-src-list="setUrl(scope.row[col.prop])" fit="cover" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-else-if="col.slots" :key="col.slots" :label="col.label" :width="col.width" :fixed="col.fixed">
                <template slot-scope="scope">
                    <slot :index="scope.$index" :name="col.slots" :col="scope.row"></slot>
                </template>
            </el-table-column>
            <!-- 对于其他没有类型的列，统统算作普通默认类型。直接按照表格属性呈现 -->
            <el-table-column v-else :key="col.prop + 4" :label="col.label" :min-width="col.width" :prop="col.prop" :formatter="col.formatter ? col.formatter : null" :show-overflow-tooltip="col.tooltip" />
        </template>
    </el-table>
</template>

<!-- 表格组件的属性定义 -->
<script>
export default {
    name: 'Table',
    components: {},
    props: {
        tableHeader: {
            type: Array,
            default: () => []
        },
        tableData: {
            type: Array,
            default: () => []
        },
        config: {
            type: Object,
            default: () => {}
        },
        tableLoading: {
            type: Boolean,
            default: false
        },
        height: {
            type: String,
            default: null
        },
        reserveSelection: {
            //保留之前选中的数据（需指定 row-key）
            type: Boolean,
            default: false
        },
        rowKey: {
            type: String,
            default: ''
        }
    },
    data() {
        return {}
    },
    computed:{
        setUrl(){
            return (val)=>{
                if(!val){
                    return null
                } else {
                    let newArr = []
                    if(Array.isArray(val)){
                        newArr = val
                    } else {
                        newArr = val.includes('[') ? JSON.parse(val) : val.split(',')
                    }
                    if(newArr.length && newArr.some(item=>item.url)){
                        return newArr.map(item=>item.url)
                    } else {
                        return newArr
                    }
                }
            }
        }
    },
    mounted() {},
    methods: {
        handleSizeChange() {},
        handleCurrentChange() {},
        onSelectChange(selection) {
            this.$emit('selectionChange', selection)
        },
        toggleRowSelection(row, ischeck) {
            this.$refs.table.toggleRowSelection(row, ischeck)
        },
        clearSelection() {
            this.$refs.table.clearSelection()
        }
    }
}
</script>

<style lang="scss" scoped>
.content-image {
    display: inline-block;
    & > .img {
        display: inline-block;
        width: 64px;
        height: 40px;
        margin-right: 5px;
    }
}
</style>