uni-app 就是没找到能几行几列表格展示信息的插件

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 就是没找到能几行几列表格展示信息的插件

麻烦哪个老哥有现成的写好的表格展示信息的吗。

1 回复

在uni-app中,虽然没有现成的插件可以直接实现几行几列表格展示信息的功能,但我们可以通过自定义组件和简单的样式布局来实现这一需求。以下是一个基本的表格展示信息的代码示例,可以帮助你快速搭建一个简单的表格展示功能。

1. 创建表格组件(Table.vue)

首先,我们创建一个自定义组件Table.vue,用于展示表格。

<template>
  <view class="table">
    <view v-for="(row, rowIndex) in tableData" :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: {
    tableData: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
}
.table-row {
  display: flex;
}
.table-cell {
  flex: 1;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
</style>

2. 使用表格组件(App.vue 或其他页面)

然后,在你的主页面或需要展示表格的页面中引入并使用这个组件。

<template>
  <view>
    <Table :tableData="tableData" />
  </view>
</template>

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

export default {
  components: {
    Table
  },
  data() {
    return {
      tableData: [
        ['Header1', 'Header2', 'Header3'],
        ['Row1 Col1', 'Row1 Col2', 'Row1 Col3'],
        ['Row2 Col1', 'Row2 Col2', 'Row2 Col3'],
        // 可以根据需要添加更多行和列
      ]
    }
  }
}
</script>

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

3. 运行项目

将上述代码添加到你的uni-app项目中,并运行项目。你将看到一个简单的表格,展示了传入的数据。

通过这种方式,你可以根据实际需求调整表格的样式和功能,比如添加表头、合并单元格、排序等。虽然这不是一个完整的插件,但自定义组件的方式为你提供了更高的灵活性和可定制性。

回到顶部