eta_mobile_front/src/views/ppt/components/SheetWrap.vue

<script setup>
import {onMounted,ref} from 'vue'
import {apiSheetInfoByCode} from '@/api/sheet.js'

const props=defineProps({
    itemData:{
        type:Object,
        default:{}
    }
})

// 获取表格数据
let list=ref([])
async function getSheetInfo(){
    const res=await apiSheetInfoByCode({UniqueCode:props.itemData.sheetId})
    if(res.Ret===200){
        list.value=res.Data?.TableInfo?.TableDataList||[]
    }
}


onMounted(()=>{
    getSheetInfo()
})

</script>

<template>
    <div class="sheet-box">
        <table>
            <tbody>
                <tr v-for="(row,rowIndex) in list" :key="rowIndex">
                    <td v-for="(col,colIndex) in row" 
                        :key="colIndex"
                        :rowspan="col.mc.rs===0?1:col.mc.rs"
                        :colspan="col.mc.cs===0?1:col.mc.cs">
                        <div>{{col.m}}</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style lang="scss" scoped>
.sheet-box{
    width: 100%;
    height: 100%;
    overflow: auto;
    &::-webkit-scrollbar{
        width: 4px;
    }
    table{
        width:100%;
        border-collapse: collapse;
        border-spacing: 0;
        td{
			border: 1px solid #747474;
			height: 45px;
			text-align: center;
		}
    }
}
</style>