当前位置：首页 > news >正文

table标签-移动端适配

news 2025/7/19 19:18:50

封装一个组件，该组件需要根据不同设备屏幕宽度自适应调整展示方式。对于 PC 端，以类似 el-table 的形式展示数据，而移动端则以一个类似 item 的形式展示每行数据。

可以先在组件中判断设备类型，如以下示例代码所示：

<template><div :class="['table-wrapper', isMobile ? 'is-mobile' : '']"><!-- PC 端展示 --><table v-if="!isMobile" class="my-table"><thead><tr><th v-for="(column, index) in columns" :key="index">{{ column.label }}</th></tr></thead><tbody><tr v-for="(row, index) in rows" :key="index"><td v-for="(column, columnIndex) in columns" :key="columnIndex">{{ row[column.prop] }}</td></tr></tbody></table><!-- 移动端展示 --><div v-else class="my-list"><div v-for="(row, index) in rows" :key="index" class="my-list-item"><div v-for="(column, columnIndex) in columns" :key="columnIndex" class="my-list-item-label">{{ column.label }}：</div><div v-for="(column, columnIndex) in columns" :key="columnIndex" class="my-list-item-value">{{ row[column.prop] }}</div></div></div></div>
</template><script>
export default {name: 'MyTable',props: {columns: Array,rows: Array,},computed: {isMobile() {return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);},},
};
</script><style scoped>
.table-wrapper {overflow-x: auto;
}.my-table {border-collapse: collapse;width: 100%;
}.my-table td,
.my-table th {border: 1px solid #ddd;padding: 8px;text-align: left;
}.my-list {background-color: #fff;
}.my-list-item {display: flex;flex-wrap: wrap;padding: 8px;border-bottom: 1px solid #ddd;
}.my-list-item-label {min-width: 60px;font-weight: bold;margin-right: 8px;
}.my-list-item-value {flex: 1;
}.is-mobile .my-table {display: none;
}.is-mobile .my-list {display: block;
}.is-mobile .my-list-item {padding: 8px 0;border-bottom: none;
}
</style>