网站科技感颜色,成都互联网公司十强,轻云服务器 wordpress,工作室名字创意好听在前端开发中#xff0c;封装组件是必不可少的。今天就来封装一个通用的列表表格组件#xff0c;包含分页功能#xff0c;可以提高代码的复用性和可维护性。
1. 组件设计 Props#xff1a; tableData#xff1a;表格数据。columns#xff1a;表格列配置。total#xff…在前端开发中封装组件是必不可少的。今天就来封装一个通用的列表表格组件包含分页功能可以提高代码的复用性和可维护性。
1. 组件设计 Props tableData表格数据。columns表格列配置。total总条数。loading加载状态。pagination分页配置当前页、每页条数。 Events update:pagination分页变化时触发。refresh刷新数据时触发。 Slots 自定义列内容。自定义操作按钮。 2. 封装代码
TableWithPagination.vue
templatediv classtable-with-pagination!-- 表格 --el-table:datatableDataborderstripev-loadingloadingstylewidth: 100%!-- 动态列 --el-table-columnv-forcolumn in columns:keycolumn.prop:propcolumn.prop:labelcolumn.label:widthcolumn.width:aligncolumn.align || center!-- 自定义列内容 --template #defaultscope v-ifcolumn.slotslot :namecolumn.slot :rowscope.row/slot/template/el-table-column!-- 操作列 --el-table-columnv-if$slots.actionslabel操作aligncenter:widthactionsWidthtemplate #defaultscopeslot nameactions :rowscope.row/slot/template/el-table-column/el-table!-- 分页 --el-paginationclasspaginationbackgroundlayouttotal, sizes, prev, pager, next, jumper:totaltotal:page-sizepagination.pageSize:current-pagepagination.pageNosize-changehandleSizeChangecurrent-changehandleCurrentChange//div
/templatescript setup
import { ref, watch } from vue;const props defineProps({tableData: {type: Array,default: () [],},columns: {type: Array,default: () [],},total: {type: Number,default: 0,},loading: {type: Boolean,default: false,},pagination: {type: Object,default: () ({pageNo: 1,pageSize: 10,}),},actionsWidth: {type: String,default: 180,},
});const emit defineEmits([update:pagination, refresh]);// 分页大小变化
const handleSizeChange (pageSize) {emit(update:pagination, { ...props.pagination, pageSize });emit(refresh);
};// 当前页变化
const handleCurrentChange (pageNo) {emit(update:pagination, { ...props.pagination, pageNo });emit(refresh);
};
/scriptstyle scoped
.table-with-pagination {margin-top: 20px;
}.pagination {margin-top: 20px;text-align: right;
}
/style
3. 使用示例
templatediv!-- 搜索栏 --el-form :inlinetrue :modelqueryParamsel-form-item label任务名称el-input v-modelqueryParams.taskName placeholder请输入任务名称 //el-form-itemel-form-itemel-button typeprimary clickhandleSearch搜索/el-button/el-form-item/el-form!-- 表格组件 --TableWithPagination:table-datatableData:columnscolumns:totaltotal:loadingloading:paginationpaginationupdate:paginationhandlePaginationChangerefreshfetchData!-- 自定义列 --template #status{ row }el-tag :typerow.status 1 ? success : danger{{ row.status 1 ? 启用 : 禁用 }}/el-tag/template!-- 操作列 --template #actions{ row }el-button typeprimary sizesmall clickhandleEdit(row)编辑/el-buttonel-button typedanger sizesmall clickhandleDelete(row)删除/el-button/template/TableWithPagination/div
/templatescript setup
import { ref, onMounted } from vue;
import TableWithPagination from ./components/TableWithPagination.vue;
import { fetchTaskList } from /api/task; // 假设有一个获取任务列表的 API// 表格列配置
const columns [{ prop: taskName, label: 任务名称 },{ prop: taskType, label: 任务类型 },{ prop: status, label: 状态, slot: status }, // 使用自定义列
];// 表格数据
const tableData ref([]);
const total ref(0);
const loading ref(false);// 查询参数
const queryParams ref({taskName: ,
});// 分页参数
const pagination ref({pageNo: 1,pageSize: 10,
});// 获取数据
const fetchData async () {try {loading.value true;const res await fetchTaskList({...queryParams.value,...pagination.value,});tableData.value res.data.list;total.value res.data.total;} catch (error) {console.error(获取数据失败, error);} finally {loading.value false;}
};// 分页变化
const handlePaginationChange (newPagination) {pagination.value newPagination;fetchData();
};// 搜索
const handleSearch () {pagination.value.pageNo 1; // 重置页码fetchData();
};// 编辑
const handleEdit (row) {console.log(编辑, row);
};// 删除
const handleDelete (row) {console.log(删除, row);
};// 初始化加载数据
onMounted(() {fetchData();
});
/script
父组件中使用 TableWithPagination以上就是封装 Vue 3 和 Element Plus 中封装一个通用的列表表格组件将表格和分页逻辑封装在一个组件中便于维护和扩展。
