uni-app 建议官方增加一个table表格组件 支持横向滚动 左右侧可固定 并适配分页功能

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

uni-app 建议官方增加一个table表格组件 支持横向滚动 左右侧可固定 并适配分页功能

无相关信息

2 回复

app基本没那需求吧


理解你的需求,虽然目前uni-app官方尚未提供完全符合你描述的table表格组件,但我们可以通过组合现有组件和自定义逻辑来实现类似功能。以下是一个基于uni-app的简单实现方案,包括横向滚动、左右侧固定列以及分页功能的示例代码。

1. 页面布局(template)

<template>
  <view class="container">
    <scroll-view scroll-x="true" class="table-scroll">
      <view class="table-header">
        <view class="fixed-left">ID</view>
        <view v-for="(header, index) in headers" :key="index" class="table-cell">{{ header }}</view>
        <view class="fixed-right">操作</view>
      </view>
      <view v-for="(row, rowIndex) in paginatedData" :key="rowIndex" class="table-row">
        <view class="fixed-left">{{ row.id }}</view>
        <view v-for="(cell, cellIndex) in row.data" :key="cellIndex" class="table-cell">{{ cell }}</view>
        <view class="fixed-right">
          <button @click="handleAction(row.id)">编辑</button>
        </view>
      </view>
    </scroll-view>
    <view class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <text>第{{ currentPage }}页</text>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </view>
  </view>
</template>

2. 样式(style)

<style scoped>
.container {
  padding: 10px;
}
.table-scroll {
  white-space: nowrap;
}
.table-header, .table-row {
  display: flex;
}
.fixed-left, .fixed-right {
  width: 100px; /* 固定列宽度 */
  background: #f0f0f0;
}
.table-cell {
  min-width: 150px; /* 动态列宽度 */
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
button {
  margin: 0 5px;
}
</style>

3. 脚本(script)

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Gender'],
      data: /* ...数据数组... */,
      pageSize: 10,
      currentPage: 1,
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.data.slice(start, end).map(row => ({
        id: row.id,
        data: row.data.slice(1, -1) // 排除左右固定列
      }));
    },
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
    handleAction(id) {
      // 处理操作
    }
  }
};
</script>

此示例展示了如何通过组合scroll-viewview等组件,以及计算属性和方法来实现表格的横向滚动、固定列和分页功能。你可以根据实际需求进一步调整和优化代码。

回到顶部