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

封装Element UI中el-table表格为可配置列公用组件

news 2025/9/4 18:34:27

Hi，我是前端人类学（之前叫布兰妮甜）！
在现代前端开发中，表格是展示数据最常用的组件之一。Element UI的el-table功能强大，但在大型项目中直接使用会导致代码重复和维护困难。本文将探讨如何将el-table封装为可配置列的公用组件，提高开发效率和可维护性。

文章目录

- 一、为什么需要封装el-table？
- 二、设计思路
- - 2.1 组件接口设计
  - 2.2 列配置数据结构
- 三、实现方案
- - 3.1 基础封装
  - 3.2 高级功能扩展
- 四、使用示例
- - 4.1 基本用法
  - 4.2 带自定义渲染的用法

一、为什么需要封装el-table？

减少重复代码：项目中多个表格往往有相似的列和功能
统一风格：确保整个项目的表格样式和行为一致
易于维护：修改表格功能只需调整一个组件
提高开发效率：通过配置快速生成表格，减少编码时间

二、设计思路

2.1 组件接口设计

公用表格组件应该提供清晰的接口：

columns：列配置数组，定义每列的属性
data：表格数据源
支持el-table的所有原生属性和事件
支持自定义列模板

2.2 列配置数据结构

// 列配置示例
const columns = [{prop: 'name',          // 字段名label: '姓名',         // 列名width: '120',          // 列宽sortable: true,        // 是否可排序fixed: false,          // 是否固定align: 'center',       // 对齐方式// 自定义渲染函数render: (h, { row, index }) => {return h('span', `员工: ${row.name}`)}},// 更多列...
]

三、实现方案

3.1 基础封装

首先创建一个可接收列配置的表格组件：

<template><el-table:data="tableData"v-bind="$attrs"v-on="$listeners"><template v-for="column in columns"><!-- 自定义列 --><el-table-columnv-if="column.render":key="column.prop"v-bind="column"><template slot-scope="scope"><!-- 使用render函数渲染自定义内容 --><render-cell:render="column.render":row="scope.row":index="scope.$index"/></template></el-table-column><!-- 普通列 --><el-table-columnv-else:key="column.prop"v-bind="column"/></template><!-- 默认插槽用于添加其他列 --><slot /></el-table>
</template><script>
// 用于渲染自定义内容的组件
const RenderCell = {functional: true,props: {render: Function,row: Object,index: Number},render: (h, ctx) => {return ctx.props.render(h, ctx)}
}export default {name: 'ConfigurableTable',components: { RenderCell },props: {columns: {type: Array,default: () => []},data: {type: Array,default: () => []}},computed: {tableData() {return this.data}}
}
</script>

3.2 高级功能扩展

在实际项目中，表格往往需要更多功能：

1. 支持分页

<template><div class="table-container"><el-table ... /><!-- 分页组件 --><el-paginationv-if="showPagination":current-page="currentPage":page-size="pageSize":total="total"@current-change="handlePageChange"layout="total, sizes, prev, pager, next, jumper"/></div>
</template>

2. 支持操作列

// 在columns中添加操作列
{label: '操作',width: '150',actions: [{label: '编辑',icon: 'el-icon-edit',onClick: (row, index) => {this.handleEdit(row)}},{label: '删除',icon: 'el-icon-delete',type: 'danger',onClick: (row, index) => {this.handleDelete(row)}}]
}

3. 支持动态列显示

// 添加visible属性控制列显示
{prop: 'phone',label: '手机号',visible: true // 可通过外部条件控制显示/隐藏
}

四、使用示例

4.1 基本用法

<template><configurable-table:columns="columns":data="tableData"stripeborder/>
</template><script>
export default {data() {return {columns: [{prop: 'name',label: '姓名',width: '120'},{prop: 'age',label: '年龄',sortable: true},{prop: 'address',label: '地址'}],tableData: [{ name: '张三', age: 25, address: '北京市海淀区' },{ name: '李四', age: 30, address: '上海市浦东新区' }]}}
}
</script>

4.2 带自定义渲染的用法

<template><configurable-table:columns="columns":data="tableData"/>
</template><script>
export default {data() {return {columns: [{prop: 'name',label: '姓名',render: (h, { row }) => {return h('div', [h('el-avatar', {props: {size: 'small',src: row.avatar}}),h('span', {style: { marginLeft: '10px' }}, row.name)])}},{prop: 'status',label: '状态',render: (h, { row }) => {const type = row.status === '成功' ? 'success' : 'danger'return h('el-tag', {props: { type }}, row.status)}}],tableData: [...]}}
}
</script>