uni-app 实现表格head在左侧内容在右侧并支持左右滑动功能

有没有这种表格，表头放左侧，内容在右侧，然后表头固定，内容可以左右滑动，参考附件图片

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解

wuwangju 2楼•1 天前

在uni-app中实现一个表格，其表头在左侧、内容在右侧，并支持左右滑动功能，可以通过自定义组件和布局来实现。以下是一个简单的示例代码，展示了如何实现这一需求。

首先，在pages/index/index.vue文件中，创建表格组件的模板：

<template>
  <view class="container">
    <scroll-view scroll-x="true" class="scroll-view">
      <view class="table">
        <view class="table-header">
          <view class="cell" v-for="(header, index) in headers" :key="index">{{ header }}</view>
        </view>
        <view class="table-body">
          <view class="row" v-for="(row, rowIndex) in data" :key="rowIndex">
            <view class="cell left-cell">{{ rowIndex + 1 }}</view>
            <view class="cell" v-for="(cell, cellIndex) in row" :key="cellIndex" class="right-cell">{{ cell }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Gender'],
      data: [
        ['Alice', 25, 'Female'],
        ['Bob', 30, 'Male'],
        ['Charlie', 35, 'Male']
      ]
    };
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.scroll-view {
  white-space: nowrap;
}
.table {
  display: inline-block;
  border-collapse: collapse;
}
.table-header, .table-body .row {
  display: flex;
}
.cell {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
.left-cell {
  min-width: 80px;
}
.right-cell {
  min-width: 120px;
}
</style>

在上面的代码中：

模板部分：
- 使用scroll-view组件并设置scroll-x="true"来支持水平滚动。
- 使用v-for指令遍历表头和数据，生成表格内容。
- 表头位于左侧，数据内容位于右侧，通过不同的类名区分样式。
脚本部分：
- 定义headers和data数组来存储表头和数据。
样式部分：
- 设置scroll-view的white-space: nowrap;以防止内容换行。
- 使用display: flex;来布局表头和表格行。
- 设置单元格的边框、内边距和文本对齐方式。
- 为左侧单元格和右侧单元格设置不同的最小宽度。

通过上述代码，可以在uni-app中实现一个表头在左侧、内容在右侧的表格，并且支持左右滑动功能。你可以根据实际需求调整样式和数据结构。