uniapp table fixed

### 创建固定表格组件的方法 在 UniApp 中实现固定的 table 表格组件可以通过多种方式完成。以下是基于提供的参考资料以及专业知识的具体方法。 #### 方法一：使用 `mosowe-table` 高级表格组件 `mosowe-table` 是一款支持灵活配置的高级表格组件，能够轻松实现固定列和固定头部的功能[^3]。该组件通过内置的 props 和 slots 提供了强大的定制能力，适合复杂场景下的需求。 - **固定头部** 设置属性 `fixed-header="true"` 即可启用固定表头功能。 - **固定列** 使用 `fixed-left-columns` 或 `fixed-right-columns` 属性来指定左侧或右侧需要固定的列数。 示例代码如下： ```html <template> <view> <mosowe-table :data="tableData" fixed-header="true" fixed-left-columns="1"> <!-- 自定义列 --> <mosowe-column prop="name" label="姓名"></mosowe-column> <mosowe-column prop="age" label="年龄"></mosowe-column> <mosowe-column prop="address" label="地址"></mosowe-column> </mosowe-table> </view> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 28, address: '北京' }, { name: '李四', age: 30, address: '上海' } ] }; } }; </script> ``` --- #### 方法二：自定义增强版 Table 组件 如果现有组件无法完全满足项目需求，则可以参考引用中的自定义增强版 table 表格组件[^1]。此组件由开发者自行设计并优化，适用于 H5、小程序及 App 端跨平台运行。 为了实现固定效果，需结合 CSS 的定位机制与滚动条控制逻辑： - **HTML 结构** 将表格分为两部分：表头 (`thead`) 和内容区域 (`tbody`)。 - **CSS 样式** 利用 `position: sticky;` 实现固定表头的效果；对于固定列则可通过设置独立容器配合 `overflow-x: auto;` 来管理水平滚动行为。 示例代码如下： ```html <template> <scroll-view scroll-y style="height: 300px;"> <view class="table-container"> <table> <thead> <tr> <th>序号</th> <th>名称</th> <th>描述</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.description }}</td> </tr> </tbody> </table> </view> </scroll-view> </template> <style scoped> .table-container { overflow-x: auto; } thead th { position: sticky; top: 0; background-color: white; z-index: 1; } </style> <script> export default { data() { return { tableData: Array.from({ length: 20 }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}`, description: `Description of Item ${i + 1}` })) }; } }; </script> ``` --- #### 方法三：扩展 `uni-table` 功能 针对原生 `uni-table` 组件，虽然其基础功能有限，但可以通过二次封装增加固定功能[^2]。具体操作包括修改模板结构或将事件绑定至特定 DOM 节点。 以下是一个简单的行点击事件绑定案例（未涉及固定功能），作为扩展思路的基础： ```javascript methods: { handleRowClick(row) { console.log('Clicked row:', row); } }, mounted() { this.$refs.uniTable.$el.querySelectorAll('tr').forEach((rowEl, rowIndex) => { rowEl.addEventListener('click', () => { const rowData = this.tableData[rowIndex]; this.handleRowClick(rowData); }); }); } ``` --- ### 总结 以上三种方法分别对应不同的开发阶段和技术背景。推荐优先选用成熟的第三方库（如 `mosowe-table`），以减少重复造轮子的工作量；若追求极致性能或特殊样式，则考虑自定义解决方案。