h5原生table封装

这篇博客探讨了如何在Vue项目中封装H5原生table,旨在寻找最佳实践。作者请求社区分享有关有效引入和使用表格组件的建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template>
  <table class='tableCom'
         width="100%"
         align="center"
         cellpadding="0"
         cellspacing="0">
    <thead>
      <tr align='center'
          class="thead_tr">
        <td v-for="(item,ind) in tableHead"
            :key="ind"
            :width='item.width'
            :style="{paddingLeft: item.paddingLeft,paddingRight: item.paddingRight}"
            :align="item.alignHeader || 'center'"
            class="thead_td">{
  
  {item.text}}</td>
      </tr>
    </thead>
    <tbody v-if='tableData.length'>
      <tr v-for="(item,index) in tableData"
          :key="index"
          :class="['tbody_tr', bt_none ? 'bt_none' : '']">
        <td v-for="(content,i) in tableHead"
            :key="i"
            :width='content.width'
            :style="{paddingLeft: content.paddingLeft, paddingRight: content.paddingRight}"
            :align="content.align || 'center'"
       
### 创建固定表格组件的方法 在 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`),以减少重复造轮子的工作量;若追求极致性能或特殊样式,则考虑自定义解决方案。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值