谷歌提交网站入口,wordpress前台自动登录,中文wordpress博客模板,网站建设时如何调用qq微信【Element入门】Element UI 数据展示组件详解
Element入门系列导航
【Element入门】1、Element UI 介绍与安装 【Element入门】2、Element UI 的基本使用 【Element入门】3、Element UI 表单组件详解 【Element入门】4、Element UI 布局组件详解 【Element入门】5、Element U…【Element入门】Element UI 数据展示组件详解
Element入门系列导航
【Element入门】1、Element UI 介绍与安装 【Element入门】2、Element UI 的基本使用 【Element入门】3、Element UI 表单组件详解 【Element入门】4、Element UI 布局组件详解 【Element入门】5、Element UI 导航组件详解 【Element入门】6、Element UI 数据展示组件详解本文 【Element入门】7、Element UI 反馈组件详解 【Element入门】8、Element UI 自定义主题 数据展示是 Web 应用中非常重要的部分常用于显示和管理大量的数据。Element UI 提供了强大的数据展示组件包括 Table 组件和 Pagination 组件帮助开发者快速构建高效的数据展示界面。本篇文章将详细介绍这两类数据展示组件的使用方法。
Table组件的基本使用
基本概念
Table 组件用于展示结构化的数据表格支持排序、筛选、分页等功能适用于各种数据展示场景。
基本使用
以下是一个简单的 Table 组件示例
templatediv idappel-table :datatableData stylewidth: 100%el-table-column propdate labelDate width180/el-table-columnel-table-column propname labelName width180/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-table/div
/templatescript
export default {name: App,data() {return {tableData: [{ date: 2021-05-03, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-04, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-05, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-06, name: Tom, address: No. 189, Grove St, Los Angeles }]};}
};
/script在这个示例中我们使用 el-table 组件展示了一组简单的数据并通过 el-table-column 组件定义了表格的列。
表格排序
可以通过设置 sortable 属性来使表格列支持排序
templatediv idappel-table :datatableData stylewidth: 100%el-table-column propdate labelDate width180 sortable/el-table-columnel-table-column propname labelName width180 sortable/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-table/div
/templatescript
export default {name: App,data() {return {tableData: [{ date: 2021-05-03, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-04, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-05, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-06, name: Tom, address: No. 189, Grove St, Los Angeles }]};}
};
/script在这个示例中date 和 name 列都被设置为可排序的。
表格筛选
可以通过设置 filters 属性和 filter-method 方法来使表格列支持筛选
templatediv idappel-table :datatableData stylewidth: 100%el-table-column propdate labelDate width180 sortable/el-table-columnel-table-column propname labelName width180 :filters[{ text: Tom, value: Tom }, { text: Jerry, value: Jerry }] :filter-methodfilterHandler filter-placementbottom-end/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-table/div
/templatescript
export default {name: App,data() {return {tableData: [{ date: 2021-05-03, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-04, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05vue{ date: 2021-05-05, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-06, name: Jerry, address: No. 189, Grove St, Los Angeles }]};},methods: {filterHandler(value, row) {return row.name value;}}
};
/script在这个示例中我们为 name 列添加了筛选功能用户可以通过筛选器选择 Tom 或 Jerry 进行筛选。
表格合计行
可以通过设置 show-summary 属性和 summary-method 方法来显示表格的合计行
templatediv idappel-table :datatableData stylewidth: 100% show-summary :summary-methodgetSummariesel-table-column propdate labelDate width180/el-table-columnel-table-column propname labelName width180/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-table/div
/templatescript
export default {name: App,data() {return {tableData: [{ date: 2021-05-03, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-04, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-05, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-06, name: Jerry, address: No. 189, Grove St, Los Angeles }]};},methods: {getSummaries(param) {const { columns, data } param;const sums [];columns.forEach((column, index) {if (index 0) {sums[index] Total;return;}const values data.map(item Number(item[column.property]));if (!values.every(value isNaN(value))) {sums[index] values.reduce((prev, curr) {const value Number(curr);if (!isNaN(value)) {return prev curr;} else {return prev;}}, 0);sums[index] units;} else {sums[index] N/A;}});return sums;}}
};
/script在这个示例中我们通过 show-summary 属性显示合计行并通过 summary-method 方法自定义合计逻辑。
Pagination分页组件
基本概念
Pagination 组件用于数据的分页展示常与 Table 组件结合使用。它提供了丰富的分页功能和多种配置选项帮助开发者快速实现分页效果。
基本使用
以下是一个简单的分页组件示例
templatediv idappel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[10, 20, 30, 40]:page-size10layouttotal, sizes, prev, pager, next, jumper:total100/el-pagination/div
/templatescript
export default {name: App,data() {return {currentPage: 1};},methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}}
};
/script在这个示例中我们通过 el-pagination 组件展示了一个分页器并绑定了分页大小和当前页码的改变事件。
与 Table 结合使用
以下是一个 Table 组件和 Pagination 组件结合使用的示例
templatediv idappel-table :datapaginatedData stylewidth: 100%el-table-column propdate labelDate width180/el-table-columnel-table-column propname labelName width180/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 20]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltableData.length/el-pagination/div
/templatescript
export default {name: App,data() {return {currentPage: 1,pageSize: 5,tableData: [{ date: 2021-05-03, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-04, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-05, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-06, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-07, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-08, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-09, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-10, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-11, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-12, name: Jerry, address: No. 189, Grove St, Los Angeles }]};},computed: {paginatedData() {const start (this.currentPage - 1) * this.pageSize;const end start this.pageSize;return this.tableData.slice(start, end);}},methods: {handleSizeChange(size) {this.pageSize size;},handleCurrentChange(page) {this.currentPage page;}}
};
/script在这个示例中我们实现了以下功能
分页数据计算通过 computed 属性 paginatedData 计算当前页显示的数据。分页大小改变通过 handleSizeChange 方法处理每页显示条数的改变。当前页改变通过 handleCurrentChange 方法处理当前页码的改变。
自定义分页布局
Pagination 组件支持自定义布局可以通过 layout 属性配置分页组件的布局
templatediv idappel-table :datapaginatedData stylewidth: 100%el-table-column propdate labelDate width180/el-table-columnel-table-column propname labelName width180/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 20]:page-sizepageSizelayoutprev, pager, next, jumper, -, total, sizes:totaltableData.length/el-pagination/div
/templatescript
export default {name: App,data() {return {currentPage: 1,pageSize: 5,tableData: [{ date: 2021-05-03, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-04, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-05, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-06, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-07, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-08, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-09, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-10, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-11, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-12, name: Jerry, address: No. 189, Grove St, Los Angeles }]};},computed: {paginatedData() {const start (this.currentPage - 1) * this.pageSize;const end start this.pageSize;return this.tableData.slice(start, end);}},methods: {handleSizeChange(size) {this.pageSize size;},handleCurrentChange(page) {this.currentPage page;}}
};
/script在这个示例中我们通过 layout 属性自定义了分页组件的布局使其显示顺序为 prev、pager、next、jumper、分隔符 -、total 和 sizes。
完整示例
下面是一个包含更多功能的完整示例包括排序、筛选、分页等功能
templatediv idappel-table :datapaginatedData stylewidth: 100% sort-changehandleSortChangeel-table-column propdate labelDate width180 sortable/el-table-columnel-table-column propname labelName width180 :filters[{ text: Tom, value: Tom }, { text: Jerry, value: Jerry }] :filter-methodfilterHandler filter-placementbottom-end/el-table-columnel-table-column propaddress labelAddress/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 20]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totalfilteredData.length/el-pagination/div
/templatescript
export default {name: App,data() {return {currentPage: 1,pageSize: 5,sortProp: ,sortOrder: ,tableData: [{ date: 2021-05-03, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-04, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-05, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-06, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-07, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-08, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-09, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-10, name: Jerry, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-11, name: Tom, address: No. 189, Grove St, Los Angeles },{ date: 2021-05-12, name: Jerry, address: No. 189, Grove St, Los Angeles }]};},computed: {filteredData() {let data this.tableData;// Filter logicif (this.filters.length 0) {data data.filter(row {return this.filters.every(filter {return filter.method(row[filter.prop], filter.value);});});}// Sort logicif (this.sortProp) {data data.slice().sort((a, b) {const propA a[this.sortProp];const propB b[this.sortProp];if (this.sortOrder ascending) {return propA propB ? 1 : (propA propB ? -1 : 0);} else if (this.sortOrder descending) {return propA propB ? 1 : (propA propB ? -1 : 0);}return 0;});}return data;},paginatedData() {const start (this.currentPage - 1) * this.pageSize;const end start this.pageSize;return this.filteredData.slice(start, end);}},methods: {handleSizeChange(size) {this.pageSize size;},handleCurrentChange(page) {this.currentPage page;},handleSortChange({ prop, order }) {this.sortProp prop;this.sortOrder order;},filterHandler(value, row) {return row.name value;}}
};
/script在这个完整示例中我们结合了排序、筛选和分页功能具体实现如下
数据过滤在 filteredData 计算属性中根据用户选择的筛选条件过滤数据。数据排序在 filteredData 计算属性中根据用户选择的排序条件对数据进行排序。分页数据计算在 paginatedData 计算属性中根据当前页码和每页显示条数计算当前页显示的数据。分页大小改变通过 handleSizeChange 方法处理每页显示条数的改变。当前页改变通过 handleCurrentChange 方法处理当前页码的改变。排序改变通过 handleSortChange 方法处理用户选择的排序条件。筛选处理通过 filterHandler 方法处理筛选逻辑。
结语
通过本章的学习我们详细了解了 Element UI 提供的两种主要数据展示组件Table 组件和 Pagination 组件。Table 组件适用于展示结构化的数据表格支持排序、筛选、分页等功能Pagination 组件适用于数据的分页展示常与 Table 组件结合使用帮助开发者快速实现分页效果。Element UI 提供的这些数据展示组件可以帮助我们快速构建高效的数据显示界面。
在接下来的章节中我们将继续深入探讨 Element UI 的其他组件和高级功能敬请期待希望这篇文章对你有所帮助祝你在前端开发的道路上越走越远
