北京网站建设制作,颍州网站建设,软文案例短篇,oss做网站迁移封装一个组件#xff0c;该组件需要根据不同设备屏幕宽度自适应调整展示方式。对于 PC 端#xff0c;以类似 el-table 的形式展示数据#xff0c;而移动端则以一个类似 item 的形式展示每行数据。
可以先在组件中判断设备类型#xff0c;如以下示例代码所示#xff1a;
…封装一个组件该组件需要根据不同设备屏幕宽度自适应调整展示方式。对于 PC 端以类似 el-table 的形式展示数据而移动端则以一个类似 item 的形式展示每行数据。
可以先在组件中判断设备类型如以下示例代码所示
templatediv :class[table-wrapper, isMobile ? is-mobile : ]!-- PC 端展示 --table v-if!isMobile classmy-tabletheadtrth v-for(column, index) in columns :keyindex{{ column.label }}/th/tr/theadtbodytr v-for(row, index) in rows :keyindextd v-for(column, columnIndex) in columns :keycolumnIndex{{ row[column.prop] }}/td/tr/tbody/table!-- 移动端展示 --div v-else classmy-listdiv v-for(row, index) in rows :keyindex classmy-list-itemdiv v-for(column, columnIndex) in columns :keycolumnIndex classmy-list-item-label{{ column.label }}/divdiv v-for(column, columnIndex) in columns :keycolumnIndex classmy-list-item-value{{ row[column.prop] }}/div/div/div/div
/templatescript
export default {name: MyTable,props: {columns: Array,rows: Array,},computed: {isMobile() {return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);},},
};
/scriptstyle 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 两部分。在样式上需要注意调整边距和间距使其更适合移动端的展示。
以上是一个简单的实现方式您可以根据具体需求进行修改和扩展。
