uni-app 使用 element-plus 表格组件时在 iPad 上无法滚动的问题

uni-app 使用 element-plus 表格组件时在 iPad 上无法滚动的问题

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.86

手机系统：Android

手机系统版本号：Android 16

手机厂商：华为

手机机型：ipad

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template> 
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>

更多关于uni-app 使用 element-plus 表格组件时在 iPad 上无法滚动的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 使用 element-plus 表格组件时在 iPad 上无法滚动的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 Element Plus 的表格组件时，在 iPad 上出现滚动问题，主要是由于 Element Plus 的 el-table 组件在移动端（尤其是 iOS 设备）的滚动支持不够完善。以下是几种可行的解决方案：

1. 使用 scroll-view 包裹表格

将 el-table 组件包裹在 scroll-view 中，并设置滚动方向为横向或纵向。示例代码如下：

<scroll-view scroll-y style="height: 100vh;">
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</scroll-view>

2. 启用表格内置滚动

通过设置 max-height 属性启用 el-table 的内置滚动功能：

<el-table :data="tableData" max-height="400" style="width: 100%">
  <el-table-column prop="date" label="Date" width="180" />
  <el-table-column prop="name" label="Name" width="180" />
  <el-table-column prop="address" label="Address" />
</el-table>

3. 添加 CSS 样式增强滚动

为表格容器添加以下 CSS 样式，确保滚动行为在 iOS 设备上正常工作：

.el-table {
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* 启用 iOS 平滑滚动 */
}
回到顶部