Vue+element-ui表格二次封装探索之路
2024-01-16 08:41:04
前言
在前端开发中，表格组件是必不可少的元素之一，它可以直观地展示数据，方便用户进行数据查询和管理。Vue.js作为一款流行的前端框架，提供了丰富的组件库，其中element-ui就是一款备受欢迎的UI组件库，它提供了丰富的Table组件，能够满足各种各样的表格展示需求。然而，在实际项目中，我们可能会遇到一些特殊场景，需要对Table组件进行二次封装，以满足特定的业务需求。
需求分析
在开始Table二次封装之前，我们需要对需求进行详细的分析，明确需要实现的功能和效果。例如，在我们的项目中，我们遇到了以下需求：
- 需要在表格中显示序号列，并随着数据排序的变化而自动更新。
- 需要在表格中显示操作列，并根据不同的业务场景动态配置操作按钮。
- 需要在表格中实现数据分页功能，并支持自定义每页显示的数据条数。
- 需要在表格中实现数据筛选功能，并支持多种字段的筛选条件。
- 需要在表格中实现数据导出功能，并支持多种导出格式。
技术选型
在明确了需求之后，我们需要对技术栈进行选择。由于我们使用的是Vue.js和element-ui，因此在进行Table二次封装时，我们自然而然地选择了Vue.js和element-ui。此外，我们还使用了axios库进行数据请求，以及lodash库进行数据操作。
具体实现
接下来，我们将详细介绍Table二次封装的具体实现过程。
1. 创建Table组件
首先，我们需要创建一个Table组件，该组件将作为Table二次封装的基础。我们可以使用Vue.js的官方脚手架工具Vue CLI创建一个新的项目，然后在项目中创建Table组件。
// Table.vue
<template>
<el-table
:data="tableData"
:border="true"
:stripe="true"
:style="{ width: '100%' }"
>
<el-table-column
type="index"
width="60"
/>
<el-table-column
prop="name"
label="姓名"
/>
<el-table-column
prop="age"
label="年龄"
/>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20
},
{
name: '李四',
age: 25
},
{
name: '王五',
age: 30
}
]
};
}
};
</script>
这个Table组件是一个简单的表格组件，它包含了序号列、姓名列和年龄列。
2. 添加序号列
接下来，我们需要在Table组件中添加序号列。我们可以使用Vue.js的slot特性来实现序号列。
// Table.vue
<template>
<el-table
:data="tableData"
:border="true"
:stripe="true"
:style="{ width: '100%' }"
>
<el-table-column
type="index"
width="60"
/>
<el-table-column
prop="name"
label="姓名"
/>
<el-table-column
prop="age"
label="年龄"
/>
<template slot="index">
<span>{{ $index + 1 }}</span>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20
},
{
name: '李四',
age: 25
},
{
name: '王五',
age: 30
}
]
};
}
};
</script>
在Table组件的slot标签中，我们添加了一个序号列，序号列的内容是索引值加1。
3. 添加操作列
接下来，我们需要在Table组件中添加操作列。我们可以使用Vue.js的render函数来实现操作列。
// Table.vue
<template>
<el-table
:data="tableData"
:border="true"
:stripe="true"
:style="{ width: '100%' }"
>
<el-table-column
type="index"
width="60"
/>
<el-table-column
prop="name"
label="姓名"
/>
<el-table-column
prop="age"
label="年龄"
/>
<el-table-column
label="操作"
width="120"
render-header="操作"
>
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
size="mini"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20
},
{
name: '李四',
age: 25
},
{
name: '王五',
age: 30
}
]
};
},
methods: {
handleEdit(row) {
console.log(row);
},
handleDelete(row) {
console.log(row);
}
}
};
</script>
在Table组件中，我们添加了一个操作列，操作列中包含了编辑和删除按钮。当用户点击编辑按钮时，我们可以获取到当前行的数据，然后进行编辑操作。当用户点击删除按钮时，我们可以获取到当前行的数据，然后进行删除操作。
4. 添加分页功能
接下来，我们需要在Table组件中添加分页功能。我们可以使用Vue.js的官方插件Vue-table-pagination来实现分页功能。
// Table.vue
<template>
<el-table
:data="tableData"
:border="true"
:stripe="true"
:style="{ width: '100%' }"
>
<el-table-column
type="index"
width="60"
/>
<el-table-column
prop="name"
label="姓名"
/>
<el-table-column
prop="age"
label="年龄"
/>
<el-table-column
label="操作"
width="120"
render-header="操作"
>
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
size="mini"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<vue-table-pagination
:total-pages="totalPages"
:page-size="pageSize"
:current-page="currentPage"
@page-change="handlePageChange"
/>
</div>
</template>
<script>
import VueTablePagination from 'vue-table-pagination';
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20
},
{
name: '李四',
age: 25
