Vue+Ant Design開發(fā)簡(jiǎn)單表格組件的實(shí)戰(zhàn)指南
更新時(shí)間：2025年06月25日 10:34:58 作者：碼農(nóng)阿豪@新空間
在現(xiàn)代前端開發(fā)中,數(shù)據(jù)表格是展示信息最常用的組件之一,本文主要為大家介紹了一個(gè)基于Vue和Ant Design的表格組件開發(fā)過(guò)程,感興趣的可以了解下
前言
在現(xiàn)代前端開發(fā)中，數(shù)據(jù)表格是展示信息最常用的組件之一。本文將詳細(xì)記錄一個(gè)基于Vue和Ant Design的表格組件開發(fā)過(guò)程，從最初的需求實(shí)現(xiàn)到遇到問(wèn)題，再到最終優(yōu)化方案的完整思考過(guò)程。通過(guò)這個(gè)實(shí)際案例，我們將探討如何構(gòu)建一個(gè)高效、用戶友好的數(shù)據(jù)表格組件，特別是處理固定列和滾動(dòng)區(qū)域的復(fù)雜交互。
一、項(xiàng)目背景與需求分析
我們的項(xiàng)目需要開發(fā)一個(gè)媒體廣告抓取記錄查看功能，主要需求包括：
- 展示媒體廣告位的抓取記錄數(shù)據(jù)
- 支持分頁(yè)和排序功能
- 關(guān)鍵信息需要固定顯示（左右兩側(cè)）
- 中間區(qū)域可橫向滾動(dòng)查看更多數(shù)據(jù)字段
- 良好的性能表現(xiàn)，支持大數(shù)據(jù)量
基于這些需求，我們選擇了Ant Design Vue作為UI組件庫(kù)，其強(qiáng)大的Table組件非常適合這類需求。
二、基礎(chǔ)實(shí)現(xiàn)
2.1 組件結(jié)構(gòu)設(shè)計(jì)
首先我們創(chuàng)建了GraspingRecordModal.vue組件，基礎(chǔ)結(jié)構(gòu)如下：
<template>
<a-modal
title="抓取記錄"
:visible="visible"
width="90%"
:footer="null"
@cancel="handleCancel"
>
<a-table
rowKey="id"
:columns="columns"
:dataSource="data"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
<!-- 自定義渲染插槽 -->
</a-table>
</a-modal>
</template>
2.2 數(shù)據(jù)獲取與處理
數(shù)據(jù)獲取使用異步請(qǐng)求，處理函數(shù)如下：
async fetchData() {
this.loading = true;
try {
const { data: res } = await getGraspingRecords({
mediaAdId: this.mediaAdId,
page: this.pagination.current,
pageSize: this.pagination.pageSize
});
if (res.code === '000000') {
this.data = res.data.aaData || [];
this.pagination.total = res.data.iTotalRecords || 0;
} else {
throw new Error(res.msg || '獲取數(shù)據(jù)失敗');
}
} catch (error) {
console.error('獲取抓取記錄失敗:', error);
this.$message.error(error.message);
} finally {
this.loading = false;
}
}
2.3 初始列配置
最初的列配置嘗試固定左右兩側(cè)的關(guān)鍵信息：
columns: [
{
title: '任務(wù)ID',
dataIndex: 'graspingTaskId',
width: 180,
fixed: 'left'
},
// ...其他中間列...
{
title: '狀態(tài)',
dataIndex: 'graspingStatus',
scopedSlots: { customRender: 'graspingStatus' },
width: 100,
fixed: 'right'
}
]
三、遇到的問(wèn)題與初步解決方案
3.1 空白表格區(qū)域問(wèn)題
在初步實(shí)現(xiàn)中，我們發(fā)現(xiàn)表格左右兩側(cè)出現(xiàn)了不必要的空白區(qū)域，這嚴(yán)重影響了用戶體驗(yàn)和視覺效果。
問(wèn)題表現(xiàn)：
- 固定列與非固定列之間存在間隙
- 滾動(dòng)區(qū)域兩側(cè)出現(xiàn)空白
- 表格整體布局不緊湊
3.2 原因分析
經(jīng)過(guò)調(diào)試，我們發(fā)現(xiàn)了幾個(gè)關(guān)鍵問(wèn)題：
- 寬度計(jì)算不準(zhǔn)確：固定列和非固定列的寬度總和與表格容器寬度不匹配
- 滾動(dòng)設(shè)置不當(dāng)：
scroll.x值設(shè)置不合理 - CSS樣式?jīng)_突：Ant Design默認(rèn)樣式與我們的需求有沖突
3.3 初步修復(fù)嘗試
我們首先嘗試調(diào)整列寬和滾動(dòng)設(shè)置：
:scroll="{ x: 1800 }" // 根據(jù)列寬總和設(shè)置固定值
同時(shí)調(diào)整了一些列的寬度：
{
title: '任務(wù)ID',
dataIndex: 'graspingTaskId',
width: 150, // 縮小寬度
fixed: 'left',
ellipsis: true // 添加省略號(hào)
}
四、深度優(yōu)化方案
4.1 完美的解決方案
經(jīng)過(guò)多次嘗試，我們找到了最合適的配置方案：
<a-table
:scroll="{ x: 'max-content' }"
:columns="columns"
bordered
size="middle"
>
配合以下CSS修正：
.grasping-record-modal >>> .ant-table {
min-width: 100%;
}
.grasping-record-modal >>> .ant-table-container {
overflow-x: auto !important;
}
.grasping-record-modal >>> .ant-table-body {
overflow-x: auto !important;
}
4.2 優(yōu)化后的列配置
columns: [
{
title: '任務(wù)ID',
dataIndex: 'graspingTaskId',
width: 180,
fixed: 'left',
ellipsis: true
},
{
title: '總?cè)罩緮?shù)',
dataIndex: 'totalCount',
width: 100,
fixed: 'left',
align: 'center'
},
// 中間可滾動(dòng)列...
{
title: '狀態(tài)',
dataIndex: 'graspingStatus',
scopedSlots: { customRender: 'graspingStatus' },
width: 100,
fixed: 'right',
align: 'center'
},
{
title: '抓取時(shí)間',
dataIndex: 'graspingTime',
scopedSlots: { customRender: 'time' },
width: 180,
fixed: 'right'
}
]
4.3 關(guān)鍵優(yōu)化點(diǎn)
- 使用’max-content’：讓表格根據(jù)內(nèi)容自動(dòng)計(jì)算寬度
- 強(qiáng)制溢出設(shè)置：確保滾動(dòng)行為符合預(yù)期
- 最小寬度保證：防止容器意外收縮
- 列對(duì)齊統(tǒng)一：所有數(shù)值列居中對(duì)齊
- 固定列優(yōu)化：左右兩側(cè)固定列寬度適當(dāng)加大
五、完整優(yōu)化代碼
以下是經(jīng)過(guò)全面優(yōu)化后的完整組件代碼：
<template>
<a-modal
title="抓取記錄"
:visible="visible"
width="90%"
:footer="null"
@cancel="handleCancel"
:destroyOnClose="true"
class="grasping-record-modal"
>
<a-table
rowKey="id"
:columns="columns"
:dataSource="data"
:pagination="pagination"
:loading="loading"
:scroll="{ x: 'max-content' }"
@change="handleTableChange"
bordered
size="middle"
>
<template slot="graspingStatus" slot-scope="text">
<a-tag :color="getStatusColor(text)">
{{ getStatusText(text) }}
</a-tag>
</template>
<template slot="time" slot-scope="text">
{{ formatDateTime(text) }}
</template>
</a-table>
</a-modal>
</template>
<script>
import dayjs from 'dayjs'
import { getGraspingRecords } from '@/api/ad-api/media'
export default {
name: 'GraspingRecordModal',
data() {
return {
loading: false,
data: [],
pagination: {
current: 1,
pageSize: 10,
total: 0,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50', '100'],
showTotal: total => `共 ${total} 條記錄`
},
columns: [
{
title: '任務(wù)ID',
dataIndex: 'graspingTaskId',
width: 180,
fixed: 'left',
ellipsis: true
},
{
title: '總?cè)罩緮?shù)',
dataIndex: 'totalCount',
width: 100,
fixed: 'left',
align: 'center'
},
{
title: '設(shè)備ID',
dataIndex: 'deviceIdCount',
width: 100,
align: 'center'
},
{
title: '啟動(dòng)時(shí)間',
dataIndex: 'bootTimeSecCount',
width: 100,
align: 'center'
},
{
title: '系統(tǒng)更新時(shí)間',
dataIndex: 'osUpdateTimeSecCount',
width: 120,
align: 'center'
},
{
title: '初始化時(shí)間',
dataIndex: 'birthTimeCount',
width: 100,
align: 'center'
},
{
title: 'caids',
dataIndex: 'caidsCount',
width: 100,
align: 'center'
},
{
title: '系統(tǒng)編譯時(shí)間',
dataIndex: 'sysComplingTimeCount',
width: 120,
align: 'center'
},
{
title: 'IDFA',
dataIndex: 'idfaCount',
width: 100,
align: 'center'
},
{
title: 'IMSI',
dataIndex: 'imsiCount',
width: 100,
align: 'center'
},
{
title: '安裝包列表',
dataIndex: 'appListCount',
width: 120,
align: 'center'
},
{
title: '狀態(tài)',
dataIndex: 'graspingStatus',
scopedSlots: { customRender: 'graspingStatus' },
width: 100,
fixed: 'right',
align: 'center'
},
{
title: '抓取時(shí)間',
dataIndex: 'graspingTime',
scopedSlots: { customRender: 'time' },
width: 180,
fixed: 'right'
}
]
}
},
props: {
visible: {
type: Boolean,
default: false
},
mediaAdId: {
type: [Number, String],
required: true
}
},
methods: {
formatDateTime(timeStr) {
return timeStr ? dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss') : '-'
},
getStatusText(status) {
const map = { 0: '失敗', 1: '成功', 2: '部分成功' }
return map[status] || '未知'
},
getStatusColor(status) {
const map = { 0: 'red', 1: 'green', 2: 'orange' }
return map[status] || 'default'
},
handleTableChange(pagination) {
this.pagination.current = pagination.current
this.pagination.pageSize = pagination.pageSize
this.fetchData()
},
async fetchData() {
this.loading = true
try {
const { data: res } = await getGraspingRecords({
mediaAdId: this.mediaAdId,
page: this.pagination.current,
pageSize: this.pagination.pageSize
})
if (res.code === '000000') {
this.data = res.data.aaData || []
this.pagination.total = res.data.iTotalRecords || 0
} else {
throw new Error(res.msg || '獲取數(shù)據(jù)失敗')
}
} catch (error) {
console.error('獲取抓取記錄失敗:', error)
this.$message.error(error.message)
} finally {
this.loading = false
}
},
handleCancel() {
this.$emit('close')
}
}
}
</script>
<style scoped>
.grasping-record-modal >>> .ant-table {
min-width: 100%;
}
.grasping-record-modal >>> .ant-table-container {
overflow-x: auto !important;
}
.grasping-record-modal >>> .ant-table-body {
overflow-x: auto !important;
}
</style>
六、總結(jié)與最佳實(shí)踐
通過(guò)這個(gè)案例，我們總結(jié)出以下Ant Design Table組件的最佳實(shí)踐：
1.固定列設(shè)計(jì)：
- 關(guān)鍵信息固定在左右兩側(cè)
- 固定列寬度適當(dāng)加大
- 添加
ellipsis防止長(zhǎng)文本溢出
2.滾動(dòng)區(qū)域優(yōu)化：
- 使用
scroll="{ x: 'max-content' }" - 配合CSS強(qiáng)制溢出設(shè)置
- 確保表格寬度自適應(yīng)
3.性能考慮：
- 合理設(shè)置分頁(yè)大小
- 使用
loading狀態(tài)提升用戶體驗(yàn) - 大數(shù)據(jù)量時(shí)考慮虛擬滾動(dòng)
4.視覺一致性：
- 數(shù)值列居中對(duì)齊
- 狀態(tài)使用標(biāo)簽顏色區(qū)分
- 時(shí)間統(tǒng)一格式化
5.健壯性保障：
- 數(shù)據(jù)獲取錯(cuò)誤處理
- 空狀態(tài)處理
- 分頁(yè)參數(shù)校驗(yàn)
這個(gè)案例展示了如何通過(guò)迭代優(yōu)化解決實(shí)際問(wèn)題，最終實(shí)現(xiàn)了一個(gè)既美觀又實(shí)用的數(shù)據(jù)表格組件。希望這些經(jīng)驗(yàn)?zāi)軒椭阍谖磥?lái)的項(xiàng)目中更好地使用Ant Design Table組件。
到此這篇關(guān)于Vue+Ant Design開發(fā)簡(jiǎn)單表格組件的實(shí)戰(zhàn)指南的文章就介紹到這了,更多相關(guān)Vue Ant Design組件開發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談 Vue 項(xiàng)目?jī)?yōu)化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
關(guān)于vue.extend的使用及說(shuō)明
這篇文章主要介紹了關(guān)于vue.extend的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue.js+element 默認(rèn)提示中英文實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則
這篇文章主要給大家介紹了關(guān)于vue前端el-input輸入限制輸入位數(shù)及輸入規(guī)則的相關(guān)資料,文中通過(guò)代碼介紹的介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue3實(shí)現(xiàn)全局自動(dòng)大寫轉(zhuǎn)換的兩種方案
本文介紹了在Vue項(xiàng)目中使輸入框內(nèi)容自動(dòng)轉(zhuǎn)為大寫的兩種方案：一種是自定義指令v-input-uppercase,適用于對(duì)特定輸入框進(jìn)行精細(xì)化控制；另一種是全局插件,適用于全站所有輸入框,推薦使用,兩種方案均能處理中文輸入法兼容問(wèn)題,合并成一個(gè)插件可同時(shí)實(shí)現(xiàn)兩個(gè)功能2026-04-04
element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼
這篇文章主要介紹了element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
從零開始用webpack構(gòu)建一個(gè)vue3.0項(xiàng)目工程的實(shí)現(xiàn)
這篇文章主要介紹了從零開始用webpack構(gòu)建一個(gè)vue3.0項(xiàng)目工程的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue實(shí)現(xiàn)登錄注冊(cè)模板的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)登錄注冊(cè)模板的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決
這篇文章主要介紹了基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09