<think>我们正在
使用Vue3、V
ite和
Vant4来开发
移动端应用，现在需要封装一个表格组件。
移动端表格通常需要适应小屏幕，因此我们可能会考虑
使用Vant的组件作为基础，比如
使用`van
-cell`来构建表格的行和列。
目标：封装一个表格组件，使其在
移动端有良好的展示效果。
步骤：
1
. 设计组件的props：我们需要定义表格的列（columns）和数据（data）。
2. 使用Vant的组件来构建表格的每一行和每一列。由于
移动端屏幕宽度有限，表格通常采用垂直堆叠的方式（每行数据展示为一行，每一列数据在行内垂直排列）或者横向滚动的方式（保持表头固定，内容区域横向滚动）。这里我们选择横向滚动的方式，因为这样更符合传统表格的展示，同时利用
移动端的触摸滑动。
但是，
Vant并没有提供原生的表格组件，因此我们需要自己封装。我们可以这样设计：
- 表格分为两部分：表头（thead）和表体（tbody）。
- 表头：
使用一行`van
-cell`来显示列名，每个列名是一个`van
-cell`，然后这些`van
-cell`放在一个可以横向滚动的容器内。
- 表体：每行数据也是一个横向滚动的容器，里面用多个`van
-cell`来显示每个字段。
然而，考虑到
移动端空间有限，另一种常见的做法是
使用列表的形式展示数据，每一行数据用一个卡片，卡片内部将数据按照列名分行显示（即垂直排列）。这种形式在
移动端更常见。但是用户要求的是表格组件，所以我们还是以横向展示为主。
这里我们采用横向滚动表格，因为数据列可能较多，在
移动端无法在一屏内显示完全，横向滚动是常见的解决方案。
具体实现：
1
. 组件结构：
- 最外层一个div，设置宽度100%，溢出隐藏。
- 表头区域：一个div，设置横向滚动，内部一个div用于放置表头单元格，
使用flex布局不换行。
每个表头单元格
使用`van
-cell`，设置固定的宽度（或者根据列定义的宽度）。
- 表体区域：同样一个div，横向滚动，内部通过循环数据生成行，每行也是一个div（
使用flex布局不换行），然后每列同样
使用`van
-cell`，宽度与表头对应。
2. 列定义：我们可以定义每一列的宽度（可以是固定宽度，如100px，也可以是百分比，但建议固定宽度，因为横向滚动需要）。如果列数较多，固定宽度可以保证每列宽度一致。
3. 考虑到性能，我们可以
使用虚拟滚动，但这里我们先实现基础表格，后续再考虑优化。
4. 由于
Vant的Cell组件默认是块级元素，我们需要将其改为行内块或者
使用flex布局。
我们开始编写代码：
首先，创建`ScrollTable
.vue`组件。
步骤：
1
. 定义props：columns（数组，每列包含t
itle, dataIndex, width等）和data（数组，每项是一个对象，包含列中要显示的数据）。
2. 在模板中构建表头和表体。
注意：为了保持表头和表体的列对齐，每列的宽度应该保持一致。
代码示例：
```
vue
<template>
<div class="scroll
-table">
<!
-- 表头
-->
<div class="header
-wrapper">
<div class="header
-row">
<div v
-for="column in columns"
:key="column
.dataIndex" class="header
-cell"
:style="{ width
: column
.width + &#
39;px&#
39; }">
{{ column
.t
itle }}
</div>
</div>
</div>
<!
-- 表体
-->
<div class="body
-wrapper">
<div v
-for="(row, index) in data"
:key="index" class="body
-row">
<div v
-for="column in columns"
:key="column
.dataIndex" class="body
-cell"
:style="{ width
: column
.width + &#
39;px&#
39; }">
{{ row[column
.dataIndex] }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from &#
39;
vue&#
39;
// 定义列的类型
interface Column {
t
itle
: string;
dataIndex
: string;
width
: number; // 固定宽度，单位px
}
export default defineComponent({
name
: &#
39;ScrollTable&#
39;,
props
: {
columns
: {
type
: Array as PropType<Column[]>,
required
: true
},
data
: {
type
: Array as PropType<Record<string, any>[]>,
required
: true
}
}
})
</script>
<style scoped>
.scroll
-table {
width
: 100%;
}
.header
-wrapper,
.body
-wrapper {
overflow
-x
: auto; /* 横向滚动 */
wh
ite
-space
: nowrap; /* 防止换行 */
}
.header
-row,
.body
-row {
display
: flex;
}
.header
-cell,
.body
-cell {
flex
: 0 0 auto; /* 不放大不缩小，宽度固定 */
min
-height
: 44px; /* 最小高度 */
display
: flex;
align
-items
: center;
padding
: 0 10px;
border
-bottom
: 1px solid #eee;
}
.header
-cell {
font
-weight
: bold;
background
-color
: #f7f8f9;
}
/* 可以自定义滚动条样式（可选） */
</style>
```
说明：
- 这里我们
使用flex布局来实现横向排列，每行（header
-row和body
-row）都是一个flex容器，每个单元格都是flex
item，宽度固定。
- 表头和表体都设置了横向滚动，这样当列数超出屏幕宽度时，可以横向滚动查看。
- 注意：表头和表体的每一列宽度必须相同，所以我们通过column
.width来设置，且单位是px。
但是，上面的实现中，表头和表体是分开滚动的。我们希望表头滚动时，表体也跟随滚动，反之亦然。这需要同步滚动，我们可以通过给两个滚动容器添加滚动事件监听来实现同步。
为了同步滚动，我们可以在滚动表体时，同时设置表头的滚动位置，反之亦然。但是，通常我们只希望表体滚动时表头跟着滚动（因为表头在上面，用户不会直接去滚动表头），所以我们可以只同步表体滚动到表头。
修改代码，实现表体滚动时表头同步滚动：
1
. 给表头容器和表体容器分别设置ref。
2. 监听表体容器的滚动事件，在滚动时设置表头容器的滚动位置。
修改后的模板部分：
```
vue
<template>
<div class="scroll
-table">
<!
-- 表头
-->
<div ref="headerRef" class="header
-wrapper">
<div class="header
-row">
<div v
-for="column in columns"
:key="column
.dataIndex" class="header
-cell"
:style="{ width
: column
.width + &#
39;px&#
39; }">
{{ column
.t
itle }}
</div>
</div>
</div>
<!
-- 表体
-->
<div ref="bodyRef" class="body
-wrapper" @scroll="handleBodyScroll">
<div v
-for="(row, index) in data"
:key="index" class="body
-row">
<div v
-for="column in columns"
:key="column
.dataIndex" class="body
-cell"
:style="{ width
: column
.width + &#
39;px&#
39; }">
{{ row[column
.dataIndex] }}
</div>
</div>
</div>
</div>
</template>
```
在script部分：
```ts
import { defineComponent, PropType, ref } from &#
39;
vue&#
39;
//
... 其他代码
export default defineComponent({
//
... 其他
setup() {
const headerRef = ref<HTMLElement | null>(null)
const bodyRef = ref<HTMLElement | null>(null)
const handleBodyScroll = (e
: Event) => {
if (headerRef
.value) {
headerRef
.value
.scrollLeft = (e
.target as HTMLElement)
.scrollLeft
}
}
return {
headerRef,
bodyRef,
handleBodyScroll
}
}
})
```
这样，当表体横向滚动时，表头也会跟着横向滚动，保持列对齐。
注意：这个表格组件比较简单，没有考虑复杂的功能（如固定列、排序、分页等），但作为一个基础表格组件，它已经能在
移动端提供横向滚动的表格展示。
另外，我们
使用了
Vant的样式作为基础，但这里没有直接
使用Vant的Cell组件，因为我们需要自定义布局。如果需要，我们可以将单元格替换为`van
-cell`，但是`van
-cell`默认是块级元素，我们需要调整其显示方式（比如设置为inline
-block）并覆盖一些样式。
如果希望
使用`van
-cell`，可以修改模板中的单元格部分：
```
vue
<van
-cell v
-for="column in columns"
:key="column
.dataIndex" class="header
-cell"
:style="{ width
: column
.width + &#
39;px&#
39; }"
:t
itle="column
.t
itle" />
```
但是注意，在表体中，我们可能需要自定义内容，而不仅仅是文本。因此，我们可以
使用插槽（slot）来提供自定义内容的能力。
改进：支持自定义单元格内容
我们可以为每一列定义一个插槽，这样用户可以在
使用表格组件时自定义每个单元格的渲染。
由于动态插槽在
Vue3中可以
使用，我们可以这样修改：
在columns的定义中，可以增加一个slotName字段，然后在表格组件的表体中，
使用作用域插槽。
但为了简单，我们可以提供一个默认插槽，同时允许通过列配置的slotName来指定插槽。
修改后的表体部分：
```
vue
<div v
-for="column in columns"
:key="column
.dataIndex" class="body
-cell"
:style="{ width
: column
.width + &#
39;px&#
39; }">
<slot v
-if="column
.slotName"
:name="column
.slotName"
:row="row"
:column="column"></slot>
<template v
-else>
{{ row[column
.dataIndex] }}
</template>
</div>
```
这样，在父组件中，我们可以这样
使用：
```
vue
<ScrollTable
:columns="columns"
:data="data">
<template #action="{ row }">
<van
-button type="primary" size="mini" @click="handleAction(row)">操作</van
-button>
</template>
</ScrollTable>
```
其中，columns中对应的列需要设置slotName
: &#
39;action&#
39;。
最后，考虑到
移动端性能，如果数据量很大，这个表格可能会有性能问题（因为渲染了所有行）。我们可以考虑
使用虚拟滚动，但虚拟滚动实现较复杂，这里不展开。
总结：我们封装了一个支持横向滚动的表格组件，支持自定义列宽和自定义单元格内容，并且实现了表头和表体的滚动同步。
注意：在实际
使用中，可能还需要考虑边框、样式调整等，可以根据需要调整
CSS。
以上就是一个基本的
移动端表格组件的封装方法。
由于引用中提到了
Vant，我们可以考虑
使用Vant的一些样式来美化表格，比如
使用Vant的边框样式、单元格样式等。
另外，我们还可以考虑
使用Vant的Sticky组件来固定表头，这样在滚动时表头可以始终可见。但是我们的表头已经和表体一起滚动了，所以这里没有
使用Sticky。如果需要表头在页面顶部固定，可以将表头用Sticky包裹，但要注意横向滚动的同步可能需要调整。
根据需求，我们可以进一步扩展功能，比如排序、筛选等，但这些都是后续可以添加的。
现在，我们可以
使用这个组件来展示
移动端表格了。
</think>
### 封装
Vue3 + V
ite +
Vant4 移动端表格组件的方法
在
移动端封装表格组件时，需要考虑小屏幕适配、触摸操作优化和性能问题。以下是完整实现方案：
#### 1
. 基础表格组件封装（`ScrollTable
.vue`）
```
vue
<template>
<div class="scrollable
-table">
<!
-- 表头
-->
<div class="table
-header van
-hairline
--bottom">
<div
v
-for="col in columns"
:key="col
.key"
:style="{ width
: col
.width }"
class="header
-cell"
>
{{ col
.t
itle }}
</div>
</div>
<!
-- 表格主体
-->
<van
-pull
-refresh v
-model="loading" @refresh="onRefresh">
<div class="table
-body">
<template v
-if="dataSource
.length">
<div
v
-for="(row, index) in dataSource"
:key="row
.id || index"
class="table
-row van
-hairline
--bottom"
@click="handleRowClick(row)"
>
<div
v
-for="col in columns"
:key="col
.key"
:style="{ width
: col
.width }"
class="body
-cell"
>
<slot
:name="col
.slot || &#
39;default&#
39;"
:row="row"
:value="row[col
.dataIndex]">
{{ row[col
.dataIndex] }}
</slot>
</div>
</div>
</template>
<van
-empty v
-else description="暂无数据" />
</div>
</van
-pull
-refresh>
<!
-- 分页
-->
<van
-pagination
v
-if="pagination"
v
-model="currentPage"
:page
-count="pageCount"
mode="simple"
@change="handlePageChange"
/>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from &#
39;
vue&#
39;
import { Empty, Pagination, PullRefresh } from &#
39;
vant&#
39;
interface Column {
t
itle
: string
dataIndex
: string
key
: string
width?
: string
slot?
: string
}
interface Props {
columns
: Column[]
dataSource
: any[]
pagination?
: boolean
total?
: number
pageSize?
: number
}
const props = w
ithDefaults(defineProps<Props>(), {
dataSource
: () => [],
pagination
: false,
pageSize
: 10
})
const em
it = defineEm
its([&#
39;row
-click&#
39;, &#
39;page
-change&#
39;, &#
39;refresh&#
39;])
const currentPage = ref(1)
const loading = ref(false)
// 计算分页
const pageCount = computed(() => {
return props
.pagination && props
.total
? Math
.ceil(props
.total / props
.pageSize)
: 0
})
// 行点击事件
const handleRowClick = (row
: any) => {
em
it(&#
39;row
-click&#
39;, row)
}
// 分页变化
const handlePageChange = (page
: number) => {
currentPage
.value = page
em
it(&#
39;page
-change&#
39;, page)
}
// 下拉刷新
const onRefresh = () => {
loading
.value = true
em
it(&#
39;refresh&#
39;, () => {
loading
.value = false
})
}
</script>
<style scoped>
.scrollable
-table {
width
: 100%;
overflow
: hidden;
}
.table
-header,
.table
-row {
display
: flex;
align
-items
: center;
padding
: 1
2px 8px;
}
.header
-cell {
font
-weight
: 600;
font
-size
: 1
4px;
color
: #
333;
overflow
: hidden;
text
-overflow
: ellipsis;
wh
ite
-space
: nowrap;
}
.body
-cell {
font
-size
: 1
3px;
color
: #666;
overflow
: hidden;
text
-overflow
: ellipsis;
wh
ite
-space
: nowrap;
}
.table
-body {
max
-height
: 60vh;
overflow
-y
: auto;
-webk
it-overflow
-scrolling
: touch;
}
</style>
```
####
2. 在项目中引入组件
```
typescript
// main
.ts
import { createApp } from &#
39;
vue&#
39;
import App from &#
39;
./App
.vue&#
39;
import
Vant from &#
39;
vant&#
39;
import &#
39;
vant/lib/index
.css&#
39;
const app = createApp(App)
app
.use(
Vant)
app
.mount(&#
39;#app&#
39;)
```
####
3. 使用示例
```
vue
<template>
<div class="container">
<ScrollTable
:columns="columns"
:data
-source="tableData"
:pagination="true"
:total="total"
:page
-size="10"
@row
-click="handleRowClick"
@page
-change="fetchData"
@refresh="fetchData"
>
<!
-- 自定义状态列
-->
<template #status="{ value }">
<van
-tag
:type="value === 1 ? &#
39;success&#
39;
: &#
39;danger&#
39;">
{{ value === 1 ? &#
39;启用&#
39;
: &#
39;禁用&#
39; }}
</van
-tag>
</template>
<!
-- 自定义操作列
-->
<template #action="{ row }">
<van
-button
size="mini"
type="primary"
@click
.stop="handleEd
it(row)"
>
编辑
</van
-button>
</template>
</ScrollTable>
</div>
</template>
<script setup lang="ts">
import { ref } from &#
39;
vue&#
39;
import ScrollTable from &#
39;@/components/ScrollTable
.vue&#
39;
const columns = ref([
{ t
itle
: &#
39;姓名&#
39;, dataIndex
: &#
39;name&#
39;, key
: &#
39;name&#
39;, width
: &#
39;
25%&#
39; },
{ t
itle
: &#
39;年龄&#
39;, dataIndex
: &#
39;age&#
39;, key
: &#
39;age&#
39;, width
: &#
39;15%&#
39; },
{ t
itle
: &#
39;状态&#
39;, dataIndex
: &#
39;status&#
39;, key
: &#
39;status&#
39;, width
: &#
39;
20%&#
39;, slot
: &#
39;status&#
39; },
{ t
itle
: &#
39;操作&#
39;, key
: &#
39;action&#
39;, width
: &#
39;
40%&#
39;, slot
: &#
39;action&#
39; }
])
const tableData = ref([
{ id
: 1, name
: &#
39;张三&#
39;, age
: 28, status
: 1 },
{ id
: 2, name
: &#
39;李四&#
39;, age
: 32, status
: 0 }
])
const total = ref(
20)
// 行点击事件
const handleRowClick = (row
: any) => {
console
.log(&#
39;点击行
:&#
39;, row)
}
// 编辑操作
const handleEd
it = (row
: any) => {
console
.log(&#
39;编辑
:&#
39;, row)
}
// 获取数据（模拟）
const fetchData = (page = 1) => {
console
.log(&#
39;加载页码
:&#
39;, page)
// 这里调用API获取数据
}
</script>
<style>
.container {
padding
: 1
2px;
background
: #f7f8fa;
height
: 100vh;
}
</style>
```
####
4. 关键技术点说明
1
. **响应式设计**
- 使用百分比宽度适配不同屏幕尺寸
- 通过`overflow
-y
: auto`实现垂直滚动
- 添加`
-webk
it-overflow
-scrolling
: touch`优化
移动端滚动体验
2. **性能优化**
- 虚拟滚动支持大数据量（可通过`
vue-virtual-scroller`扩展）
- 使用`v
-for`的`
:key`确保高效渲染
- 分页加载减少DOM节点数量
3. **
Vant集成**
- 使用`van
-pull
-refresh`实现下拉刷新
- 使用`van
-pagination`实现分页控制
- 使用`van
-empty`处理空数据状态
4. **扩展性设计**
- 通过插槽机制支持自定义单元格内容
- 支持分页、排序等扩展功能
- 暴露行点击、分页变化等事件接口
5
. **
移动端优化**
- 触摸友好的点击区域
- 适当的内边距确保可操作性
- 简洁的视觉设计符合
移动端风格
#### 5
. 进阶优化建议
1
. **虚拟滚动实现**
```
vue
// 添加虚拟滚动支持
<RecycleScroller
class="table
-body"
:items="dataSource"
:item
-size="5
4"
key
-field="id"
>
<template v
-slot="{
item
: row }">
<div class="table
-row">
...</div>
</template>
</RecycleScroller>
```
2. **列排序功能**
```
typescript
// 列配置增加排序支持
const columns = ref([
{
t
itle
: &#
39;姓名&#
39;,
dataIndex
: &#
39;name&#
39;,
key
: &#
39;name&#
39;,
sorter
: (a, b) => a
.name
.localeCompare(b
.name)
}
])
// 排序实现
const sortData = (key, sorter) => {
dataSource
.value
.sort(sorter)
}
```
3. **列固定功能**
```
css
/* 固定首列 */
.first
-column {
pos
ition
: sticky;
left
: 0;
z
-index
: 2;
background
: wh
ite;
}
```
这样封装的表格组件在
移动端具有良好体验，支持常见功能，且易于扩展，符合
Vue3 的组合式 API 最佳实践[^
3][^
4]。
专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
扫一扫
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
