<el-table
            :data="tableData" style="width: 100%"
        >
            <el-table-column
                v-for="column in dynamicColumns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
            >
                <template #default="{row, column, $index}">
                    <span v-if="column.label === '對(duì)比列'">{{ row[column.prop] }}</span>
                    <template v-else>
                        <div class="image-description">
                            <img
                                :src="row.imageAndDescription.imageUrl"
                                alt="Image"
                                style="max-width: 100%;
                                max-height: 100px;"
                            >
                            <div>{{ row.imageAndDescription.description }}</div>
                        </div>
                    </template>
                </template>
            </el-table-column>

            <!-- <el-table-column
                prop="date" label="對(duì)比列"
                width="180"
            />
            <el-table-column
                prop="name" label="標(biāo)注任務(wù)1"
                width="180"
            />
            <el-table-column prop="address" label="標(biāo)注任務(wù)2"/> -->
            <!-- <el-table-column label="動(dòng)態(tài)列" width="100">
                <template v-slot="scope">
                    {{ dynamicHeaderData }}
                </template>
            </el-table-column> -->
        </el-table>

模擬請(qǐng)求數(shù)據(jù)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-733763.html

const tableData = ref([]);
// 從接口獲取表頭數(shù)據(jù)
const dynamicColumns = ref([]);

onMounted(async () => {
    try {
        const res = await fetchDataFromApi();
        dynamicColumns.value = res.data.columns;
        tableData.value = res.data.tableData;
    }
    catch (error) {
        console.error('Error fetching data', error);
    }
});

// 模擬一個(gè)獲取數(shù)據(jù)的函數(shù)
function fetchDataFromApi() {
    return new Promise(resolve => {
        // 模擬接口響應(yīng)
        setTimeout(() => {
            resolve({
                data: {
                    columns: [
                        {prop: 'title', label: '對(duì)比列', width: '180'},
                        {prop: 'imageAndDescription', label: '標(biāo)注任務(wù)1', width: '300'},
                        {prop: 'imageAndDescription', label: '標(biāo)注任務(wù)2', width: '300'},
                        {prop: 'imageAndDescription', label: '標(biāo)注任務(wù)3'},
                    ],
                    tableData: [
                        {title: '狗', imageAndDescription: {imageUrl: 'https://example.com/dog.jpg', description: '這只狗很可愛(ài)，高清圖。'}},
                        {title: '貓', imageAndDescription: {imageUrl: 'https://example.com/cat.jpg', description: '這只貓也很可愛(ài)，高清圖。'}},
                        {title: '貓', imageAndDescription: {imageUrl: 'https://example.com/cat.jpg', description: '這只貓也很可愛(ài)，高清圖。'}},
                        {title: '貓', imageAndDescription: {imageUrl: 'https://example.com/cat.jpg', description: '這只貓也很可愛(ài)，高清圖。'}},
                    ],
                },
            });
        }, 1000);
    });
}

// const dynamicColumns = ref([
//     {prop: 'date', label: '對(duì)比列', width: '180'},
//     {prop: 'name', label: '標(biāo)注任務(wù)1', width: '180'},
//     {prop: 'address', label: '標(biāo)注任務(wù)2'},
// ]);

到了這里，關(guān)于el-table動(dòng)態(tài)表頭與模擬請(qǐng)求數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！