在 Vue 2 和 Element UI 中封装一个动态表格组件意味着要创建一个组件,它能够根据传入的数据和配置动态地生成表格,并支持排序、筛选、分页等功能。以下是一个基本的示例,展示了如何创建一个这样的动态表格组件:
首先,确保你已经安装了 Element UI,并在你的 Vue 项目中正确地引入和使用了它。
然后,创建一个新的 Vue 组件,比如 DynamicTable.vue
<template>
<el-table
:data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
>
<el-table-column
v-for="(column, index) in columns"
:key="index"
:prop="column.prop"
:label="column.label"
:sortable="column.sortable"
:filters="column.filters"
:filter-method="column.filterMethod"
>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalItems">
</el-pagination>
</template>
<script>
export default {
name: 'DynamicTable',
props: {
columns: {
type: Array,
required: true,
},
data: {
type: Array,
required: true,
},
},
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
sort: {
prop: '',
order: '',
},
totalItems: 0,
};
},
computed: {
filteredData() {
if (!this.sort.prop) return this.data;
return this.data.sort((a, b) => {
if (a[this.sort.prop] < b[this.sort.prop]) return this.sort.order === 'ascending' ? -1 : 1;
if (a[this.sort.prop] > b[this.sort.prop]) return this.sort.order === 'ascending' ? 1 : -1;
return 0;
});
},
paginatedData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = this.currentPage * this.pageSize;
return this.filteredData.slice(start, end);
},
},
watch: {
data(newData) {
this.totalItems = newData.length;
this.tableData = newData.slice();
},
},
methods: {
handleSortChange({ column, prop, order }) {
this.sort.prop = prop;
this.sort.order = order;
},
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
},
handleCurrentChange(val) {
this.currentPage = val;
},
},
mounted() {
this.tableData = this.data.slice();
},
};
</script>
<style scoped>
/* 你可以在这里添加一些自定义的样式 */
</style>