uniapp可折叠展开表格的实现方法

在uniapp中如何实现可折叠展开的表格功能？目前需要做一个支持点击行展开显示详细内容的表格组件，希望能在H5和小程序端都能正常使用。请问有什么比较好的实现方案或者现成的组件推荐吗？最好能提供具体的代码示例。

2 回复

在uniapp中，可通过uni-collapse组件实现可折叠表格。结合uni-collapse-item和uni-table，在折叠项内嵌入表格数据。使用v-for循环渲染数据，通过open事件控制展开/折叠状态。


在 UniApp 中实现可折叠展开表格，可以通过结合 uni-collapse 组件和自定义表格布局来实现。以下是具体步骤和示例代码：

实现思路

  1. 使用 uni-collapse 组件：作为折叠容器，管理展开/收起状态。
  2. 自定义表格内容：在每个折叠项 (uni-collapse-item) 中嵌入表格结构（如 view 模拟行和列）。
  3. 数据驱动：通过 v-for 动态渲染表格数据，确保内容灵活。

示例代码

<template>
  <view>
    <uni-collapse>
      <uni-collapse-item 
        v-for="(group, index) in tableData" 
        :key="index" 
        :title="group.category"
      >
        <!-- 表格头部 -->
        <view class="table-header">
          <text>姓名</text>
          <text>年龄</text>
          <text>城市</text>
        </view>
        <!-- 表格数据行 -->
        <view 
          v-for="(item, i) in group.list" 
          :key="i" 
          class="table-row"
        >
          <text>{{ item.name }}</text>
          <text>{{ item.age }}</text>
          <text>{{ item.city }}</text>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          category: '组别A',
          list: [
            { name: '张三', age: 25, city: '北京' },
            { name: '李四', age: 30, city: '上海' }
          ]
        },
        {
          category: '组别B',
          list: [
            { name: '王五', age: 28, city: '广州' }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.table-header, .table-row {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.table-header text, .table-row text {
  flex: 1;
  text-align: center;
}
.table-header {
  font-weight: bold;
  background-color: #f5f5f5;
}
</style>

关键点说明

  • 依赖组件：需引入 uni-collapse，若未安装，通过 npm install @dcloudio/uni-ui 安装，并在 pages.json 中配置 "usingComponents": true。
  • 样式调整：通过 CSS 的 flex 布局模拟表格列，可根据需求修改宽度、对齐方式等。
  • 交互扩展：可结合 uni-collapse 的 accordion 属性设置为手风琴模式（每次仅展开一项）。

此方法简单高效，适用于数据分组展示的场景。

回到顶部