uni-app 表格样式需求

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

uni-app 表格样式需求

开发环境 版本号 项目创建方式

公司需求需要一个表格样式,整个页面显示的表格,固定第一行第一列(可选),底部显示总记(可选),因为参数数量可能比较多还需要有滑动到底部刷新信息的信息这样的功能,可以事先把数据放在一个数组中不停的读,我在组件库中找到一个,也有固定头固定列的,但是他写的我修改起来非常麻烦,而且有些东西不好掌控,所以在这求个表格样式

1 回复

针对uni-app中的表格样式需求,我们可以通过自定义样式和使用组件的方式来实现。以下是一个简单的示例,展示如何在uni-app中创建一个带有自定义样式的表格。

首先,确保你的项目中已经安装了uni-app的基本依赖,并且已经创建了一个页面(例如pages/table/table)。

1. 创建表格组件

components目录下创建一个名为CustomTable.vue的组件文件:

<template>
  <view class="table">
    <view class="table-header">
      <view v-for="(header, index) in headers" :key="index" class="table-header-cell">{{ header }}</view>
    </view>
    <view class="table-body">
      <view v-for="(row, rowIndex) in data" :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
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
}
.table-header {
  background-color: #f2f2f2;
}
.table-header-cell, .table-cell {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.table-row:nth-child(odd) {
  background-color: #fff;
}
.table-row:nth-child(even) {
  background-color: #f9f9f9;
}
</style>

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

pages/table/table.vue中引入并使用CustomTable组件:

<template>
  <view>
    <CustomTable :headers="headers" :data="tableData" />
  </view>
</template>

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

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

3. 运行项目

确保所有文件保存后,运行uni-app项目,你应该能够在页面中看到一个带有自定义样式的表格。

这个示例展示了如何通过组件化的方式在uni-app中创建一个表格,并通过CSS样式自定义表格的外观。你可以根据实际需求进一步调整样式和结构。

回到顶部