uni-app 建议官方增加一个table表格组件 支持横向滚动 左右侧可固定 并适配分页功能
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-view
、view
等组件,以及计算属性和方法来实现表格的横向滚动、固定列和分页功能。你可以根据实际需求进一步调整和优化代码。