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 两部分。在样式上需要注意调整边距和间距，使其更适合移动端的展示。

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