uni-app 表格插件需求 看了这么多人要表格 就没哪位老哥写个表格 几行几列展示信息吗

在 uni-app 中实现一个简单的表格插件，可以通过自定义组件和使用 Flex 布局或者 CSS Grid 布局来实现。下面是一个基本的表格组件示例，展示了如何创建一个几行几列的表格，并展示一些信息。

首先，我们创建一个自定义组件 MyTable.vue：

<template>
  <view class="table-container">
    <view class="table-header">
      <view v-for="(header, index) in headers" :key="index" class="table-cell">{{ header }}</view>
    </view>
    <view class="table-body">
      <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>
  </view>
</template>

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

<style scoped>
.table-container {
  width: 100%;
  border: 1px solid #ddd;
}
.table-header {
  display: flex;
  background-color: #f2f2f2;
}
.table-body {
  display: flex;
  flex-direction: column;
}
.table-row {
  display: flex;
}
.table-cell {
  flex: 1;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  text-align: center;
}
.table-row:last-child .table-cell {
  border-bottom: none;
}
.table-cell:last-child {
  border-right: none;
}
</style>

然后，在需要使用表格的页面中引入这个组件，并传递数据：

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

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

export default {
  components: {
    MyTable
  },
  data() {
    return {
      headers: ['Name', 'Age', 'Gender'],
      rows: [
        ['Alice', 25, 'Female'],
        ['Bob', 30, 'Male'],
        ['Charlie', 28, 'Male']
      ]
    }
  }
}
</script>

这个示例展示了如何使用 uni-app 创建一个简单的表格组件，并通过 props 传递表头和行数据。表格组件使用了 Flex 布局来创建表头和表格体，每个单元格都通过 flex: 1 来确保它们均匀分布宽度。此外，还添加了简单的样式来定义边框和内边距，使表格更加美观。这个示例可以根据需要进行扩展，例如添加排序、筛选等功能。