table标签

2023-05-21 04:21| 来源: 网络整理| 查看: 265

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

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

{{ column.label }} {{ row[column.prop] }} {{ column.label }}： {{ row[column.prop] }} export default { name: 'MyTable', props: { columns: Array, rows: Array, }, computed: { isMobile() { return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); }, }, }; .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; }

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

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

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

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

【本文地址】

table标签

table标签

今日新闻

推荐新闻