leromro-web/src/views/components/ListPage/Table.vue

<template>
    <div class="app-container">
        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="data" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" v-if="isSelect" fixed/>
            <template v-for="item in column" :key="item.prop">

                <el-table-column v-if="item.type === 'img'" :label="item.label" :prop="item.tableProp || item.prop"
                    :width="item.width">
                    <template #default="scope">
                        <el-button type="primary" link @click="onClick(scope.row,item.tableProp || item.prop)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.type === 'dict'" :label="item.label" :prop="item.tableProp || item.prop"
                    :width="item.width">
                    <template #default="scope">
                        <dict-tag v-if="item.dict" :options="item.dict" :value="String(scope.row[item.tableProp || item.prop])" />

                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.type === 'render'" :label="item.label" :prop="item.prop"
                    :width="item.width">
                    <template #default="scope">
                        <span>{{ item.render(scope.row) }}</span>
                    </template>
                </el-table-column>

                <el-table-column v-else :label="item.label" :prop="item.tableProp || item.prop"
                    :width="item.width" show-overflow-tooltip  ></el-table-column>
            </template>
            <el-table-column label="操作"  class-name="small-padding fixed-width" v-if="isScope" fixed="right" min-width="120">
                <template #default="scope">
                    <el-space wrap>
                        <div v-for="item in scopeBtns" :key="item.key">
                           <template v-if="item.show">
                                <template v-if="item.hasPermi">
                                    <el-button  link :type="item.type"
                                    @click="item.func(scope.row)" v-if="item.show(scope.row)"> {{ item.label }}</el-button>
                                </template>
                                <template v-else>
                                    <el-button  link :type="item.type"
                                    @click="item.func(scope.row)" v-if="item.show(scope.row)"> {{ item.label }}</el-button>
                                </template>
                           </template>
                           <template v-else-if="item.hasPermi">
                                <el-button  link :type="item.type"
                                @click="item.func(scope.row)" v-hasPermi="item.hasPermi"> {{ item.label }}</el-button>
                           </template>
                           <template v-else>
                                <el-button  link :type="item.type"
                                @click="item.func(scope.row)" > {{ item.label }}</el-button>
                           </template>
                        </div>
                       
                    </el-space>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="图片查看"  :before-close="handleClose">
            <div class="img-box">
                <el-space wrap>
                    <div v-for="(imgItem, imgIndex) in images" :key="imgIndex">
                        <el-image  :src="imgItem"  />
                    </div>
                </el-space>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { provide,inject } from 'vue'
const props = defineProps({
    column: {
        type: Object,
        default: [],
        required: true
    },
    loading: {
        type: Boolean,
        default: false,
        required: false
    },
    data: {
        type: Array,
        default: [],
        required: true
    },
    scopeBtns: {
        type: Array,
        default: [],
    },
    tableKey: {
        type: String,
        default: 'id',
    },
    isSelect:{
        type: Boolean,
        default: true
    },
    isScope:{
        type: Boolean,
        default: true
    }
})

const ids = ref([])
const dialogVisible = ref(false)
const images = ref([]);
const injects = inject('selectChange');

/** 多选框选中数据 */
const handleSelectionChange = (selection,row) => {
    console.log('selection', selection);
    injects(selection)
    ids.value = selection.map(item => item[props.tableKey]);
    console.log('ids', ids);

}

const resetIds = () => {
    ids.value = []
}

const onClick = (row,pro) => {
    console.log('row', row,pro,typeof pro);
    dialogVisible.value = true;
    if(typeof pro === 'object'){
        images.value = pro.map(item =>{
            return row[item]
        })
        console.log('pro',aa);
        return;
    }
    if (row[pro]) {
        images.value = row[pro].split(',');
    }
}


defineExpose({
    ids,
    resetIds
})
</script>

<style lang='scss' scoped>
.img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    width: 100%;
    height: 100%;
}
</style>