当前位置：首页 > news >正文

别再写两套代码了！一个Vue组件同时支持el-table表格和el-card卡片展示

news 2026/6/11 5:13:14

用单一Vue组件实现表格与卡片双模式动态切换

在数据密集型的后台管理系统开发中，我们经常遇到一个经典难题：同一份数据需要同时支持表格视图和卡片视图两种展示方式。传统做法是维护两套独立的组件代码，这不仅增加了开发工作量，更带来了后期维护的噩梦。本文将介绍如何通过Vue的高级特性，构建一个智能的展示容器组件，实现"一次编写，双模渲染"。

1. 双模展示的痛点与解决方案

大多数后台系统都面临这样的需求场景：管理员可能需要表格视图进行快速数据检索，而业务人员则偏好卡片视图获取更直观的信息展示。传统实现方式通常会导致：

代码冗余：相同的数据逻辑需要在两个组件中重复实现
维护成本高：任何业务逻辑变更都需要同步修改两处代码
状态同步困难：分页、筛选等状态需要在组件间手动保持同步

通过分析Element UI的el-table和el-card组件特性，我们发现它们虽然渲染方式不同，但核心数据源和业务逻辑是完全一致的。这为我们设计统一组件提供了理论基础。

2. 组件化设计思路

2.1 核心架构设计

我们的智能容器组件需要解决三个关键问题：

数据统一管理：使用单一数据源驱动两种视图
视图动态切换：根据用户选择自动切换渲染模式
配置化接口：通过props提供灵活的视图配置选项

组件的核心结构如下：

<template> <div class="smart-container"> <el-table v-if="mode === 'table'" :data="data" ...> <!-- 动态列配置 --> </el-table> <div v-else class="card-grid"> <el-card v-for="item in data" :key="item.id"> <!-- 动态卡片内容 --> </el-card> </div> </div> </template>

2.2 配置参数设计

通过props接收配置参数，实现组件的灵活性：

props: { mode: { type: String, default: 'table', // 'table' | 'card' validator: value => ['table', 'card'].includes(value) }, data: { type: Array, required: true }, tableConfig: { type: Object, default: () => ({}) }, cardConfig: { type: Object, default: () => ({}) } }

3. 动态渲染实现方案

3.1 表格模式实现

利用el-table的动态列功能，我们可以根据配置动态生成表格列：

computed: { tableColumns() { return this.tableConfig.columns?.map(col => ({ label: col.label, prop: col.field, width: col.width, formatter: col.formatter })) || [] } }

3.2 卡片模式实现

卡片内容通过作用域插槽实现高度定制化：

<el-card v-for="item in data" :key="item.id"> <template #header> <div class="card-header"> {{ item[cardConfig.titleField] }} </div> </template> <div class="card-body"> <slot name="card-content" :item="item"> <!-- 默认卡片内容渲染 --> <div v-for="field in cardConfig.fields" :key="field"> <label>{{ field.label }}:</label> <span>{{ item[field.name] }}</span> </div> </slot> </div> </el-card>

3.3 响应式布局处理

针对不同屏幕尺寸优化卡片布局：

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 10px; } @media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } }

4. 高级功能扩展

4.1 分页与状态保持

通过统一的pagination组件管理分页状态：

// 统一分页处理 handlePaginationChange(params) { this.internalPagination = params this.$emit('pagination-change', params) this.fetchData() }

4.2 动态切换优化

切换视图时保持滚动位置和筛选状态：

watch: { mode(newVal, oldVal) { // 保存当前视图状态 this.viewStates[oldVal] = { scrollTop: this.$el.scrollTop, filters: this.activeFilters } // 恢复目标视图状态 this.$nextTick(() => { if (this.viewStates[newVal]) { this.$el.scrollTop = this.viewStates[newVal].scrollTop this.activeFilters = this.viewStates[newVal].filters } }) } }

4.3 性能优化策略

针对大数据量场景的优化方案：

// 虚拟滚动实现 import { VirtualList } from 'vue-virtual-scroll-list' components: { VirtualList } // 表格模式使用 <virtual-list v-if="mode === 'table'" :data-key="'id'" :data-sources="data" :data-component="TableRow" :extra-props="{ columns: tableColumns }" />

5. 完整实现与最佳实践

5.1 组件完整代码结构

<template> <div class="dual-mode-container"> <!-- 模式切换控件 --> <div class="mode-switcher"> <el-radio-group v-model="internalMode" @change="handleModeChange"> <el-radio-button label="table">表格视图</el-radio-button> <el-radio-button label="card">卡片视图</el-radio-button> </el-radio-group> <!-- 其他操作按钮 --> <slot name="actions"></slot> </div> <!-- 表格模式 --> <template v-if="internalMode === 'table'"> <el-table :data="processedData" v-bind="tableConfig" @sort-change="handleSortChange" @filter-change="handleFilterChange" > <template v-for="col in tableColumns"> <el-table-column :key="col.prop" v-bind="col" > <template #default="{ row }"> <slot :name="`table-${col.prop}`" :row="row"> {{ col.formatter ? col.formatter(row) : row[col.prop] }} </slot> </template> </el-table-column> </template> </el-table> </template> <!-- 卡片模式 --> <template v-else> <div class="card-grid"> <el-card v-for="item in processedData" :key="item.id" :class="cardConfig.cardClass" :style="cardConfig.cardStyle" > <template #header> <slot name="card-header" :item="item"> <div class="card-title"> {{ item[cardConfig.titleField || 'name'] }} </div> </slot> </template> <div class="card-content"> <slot name="card-content" :item="item"> <div v-for="field in cardConfig.fields" :key="field.name" class="card-field" > <label>{{ field.label }}:</label> <span>{{ field.formatter ? field.formatter(item) : item[field.name] }}</span> </div> </slot> </div> <div class="card-actions"> <slot name="card-actions" :item="item"></slot> </div> </el-card> </div> </template> <!-- 统一分页 --> <el-pagination v-if="showPagination" :current-page="pagination.page" :page-size="pagination.size" :total="total" @current-change="handlePageChange" @size-change="handleSizeChange" /> </div> </template>

5.2 使用示例

<template> <dual-mode-container :data="products" :mode="viewMode" :table-config="{ columns: [ { label: 'ID', prop: 'id', width: 80 }, { label: '名称', prop: 'name' }, { label: '价格', prop: 'price', formatter: formatCurrency } ], stripe: true, border: true }" :card-config="{ titleField: 'name', fields: [ { label: '产品ID', name: 'id' }, { label: '价格', name: 'price', formatter: formatCurrency }, { label: '库存', name: 'stock' } ] }" @mode-change="handleViewModeChange" > <template #table-price="{ row }"> <span style="color: #f56c6c">{{ formatCurrency(row.price) }}</span> </template> <template #card-actions="{ item }"> <el-button size="mini" @click="editProduct(item)">编辑</el-button> </template> </dual-mode-container> </template>