table标签-移动端适配

封装一个组件，该组件需要根据不同设备屏幕宽度自适应调整展示方式。对于 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>

以上代码中，通过判断 navigator.userAgent 来判断设备类型，如果是移动端，则展示列表形式，否则展示表格形式。

对于 PC 端的表格形式，可以使用标准的 table 元素来实现，样式上可以参考 el-table 组件。

对于移动端的列表形式，可以使用 flex 布局和自适应宽度来实现，每个数据项用一个 div 包含 label 和 value 两部分。在样式上需要注意调整边距和间距，使其更适合移动端的展示。

以上是一个简单的实现方式，您可以根据具体需求进行修改和扩展。