vue实现表格组件封装
封装表格组件的核心思路
Vue中封装表格组件需要考虑数据驱动、可配置性和扩展性。通过props传递配置和数据，利用插槽（slot）实现内容定制化。
基础表格封装
创建可复用的表格组件需定义基本结构：
<template>
<table class="base-table">
<thead>
<tr>
<th v-for="col in columns" :key="col.prop">
{{ col.label }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in data" :key="index">
<td v-for="col in columns" :key="col.prop">
{{ row[col.prop] }}
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
data: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
}
}
}
</script>支持动态列配置
通过columns配置实现灵活的表头定义：
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'address', label: '地址' }
]添加插槽支持
使用作用域插槽实现单元格内容自定义：
<td v-for="col in columns" :key="col.prop">
<slot :name="col.prop" :row="row">
{{ row[col.prop] }}
</slot>
</td>调用时可覆盖特定列的内容：
<base-table :data="tableData" :columns="columns">
<template #name="{ row }">
<a @click="handleClick(row)">{{ row.name }}</a>
</template>
</base-table>添加排序功能
实现客户端排序功能：
methods: {
handleSort(col) {
this.data.sort((a, b) => {
return a[col.prop] > b[col.prop] ? 1 : -1
})
}
}分页功能集成
通过组合分页组件实现完整表格功能：
<div class="table-container">
<base-table :data="currentPageData" />
<base-pagination
:total="total"
@page-change="handlePageChange"
/>
</div>性能优化建议
对于大数据量场景使用虚拟滚动：
import VirtualScroller from 'vue-virtual-scroller'
Vue.use(VirtualScroller)完整组件示例
export default {
props: {
data: Array,
columns: Array,
pagination: Object
},
data() {
return {
currentSort: { prop: '', order: '' }
}
},
computed: {
processedData() {
// 处理排序和分页逻辑
}
},
methods: {
handleSort(col) {
// 排序逻辑实现
}
}
}样式处理建议
使用CSS变量实现主题定制：
.base-table {
--table-border-color: #ebeef5;
--table-header-bg: #f5f7fa;
}
.base-table th {
background: var(--table-header-bg);
}这种封装方式提供了良好的灵活性和可维护性，可以根据项目需求进一步扩展功能如筛选、行选择等。
