uni-app 手机端表格展示

在uni-app中实现手机端表格展示，可以通过使用<view>和<text>等基础组件来模拟表格结构。以下是一个简单的代码示例，展示了如何在uni-app中实现手机端表格的展示。

首先，确保你的项目已经正确配置了uni-app的开发环境。

1. 创建一个表格组件

在components目录下创建一个名为Table.vue的组件文件，内容如下：

<template>
  <view class="table">
    <view class="table-header">
      <view v-for="(header, index) in headers" :key="index" class="table-cell">{{ header }}</view>
    </view>
    <view v-for="(row, rowIndex) in rows" :key="rowIndex" class="table-row">
      <view v-for="(cell, cellIndex) in row" :key="cellIndex" class="table-cell">{{ cell }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
}
.table-header {
  display: flex;
  background-color: #f2f2f2;
}
.table-row {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.table-cell {
  flex: 1;
  padding: 10px;
  text-align: left;
}
</style>

2. 在页面中使用表格组件

在需要使用表格的页面中，如pages/index/index.vue，引入并使用Table组件：

<template>
  <view>
    <Table :headers="headers" :rows="rows" />
  </view>
</template>

<script>
import Table from '@/components/Table.vue';

export default {
  components: {
    Table
  },
  data() {
    return {
      headers: ['Name', 'Age', 'City'],
      rows: [
        ['Alice', '25', 'New York'],
        ['Bob', '30', 'Los Angeles'],
        ['Charlie', '35', 'Chicago']
      ]
    };
  }
}
</script>

<style>
/* 你可以在这里添加全局样式 */
</style>

3. 运行项目

确保所有文件保存后，运行你的uni-app项目，你应该能够在手机端看到一个简单的表格展示。

这个示例展示了如何在uni-app中使用基础组件来模拟表格的展示。你可以根据需要进一步自定义样式和功能，如添加边框、调整单元格宽度、处理滚动等。