简述：在 Element UI 中，Table组件是一个功能强大的数据展示工具，用于呈现结构化的数据列表。它提供了丰富的特性，使得数据展示不仅美观而且高效。而Pagination组件是一个用于实现数据分页显示的强大工具。它允许用户在大量数据中导航，通过控制每页显示的数据数量和跳转到不同的页面，从而提高数据展示的效率和用户体验。简单记录
一. HTML
//表格<el-table@selection-change="handleSelectionChange"ref="singleTable":data="tableData":cell-style="{ 'text-align': 'center' }"highlight-current-rowstyle="width: 100%":header-cell-style="tableHeader":cell-style="tableContent":header-row-style="{ background: '#091e50', color: 'white' }":row-style="{ background: '#091e50', color: 'white' }">// 表格内容// 全选显示 <el-table-column type="selection" width="55"> </el-table-column><el-table-columnheader-align="center"min-width="20%"label="开始时间"property="startTime"></el-table-column></el-table> //已选项数量提示和分页<div class="btm_choseBox"><div class="selected_items"><div class="tb_checks"><el-checkbox:indeterminate="isIndeterminate"v-model="checkAll"@change="handleCheckAllChange">已选 {{ multipleSelection.length }} 项</el-checkbox></div><el-button @click="deletemultipleSelection"> 删除选中项 </el-button></div><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-sizes="[10, 20, 30, 40, 50]"layout="total, sizes, prev, pager, next, jumper":current-page="currentPage":page-size="params.pageSize":total="total"></el-pagination></div><!-- 表格组件 -->@selection-change="handleSelectionChange" // 选中项变化时的处理方法ref="singleTable" // 表格的引用名称:data="tableData" // 表格数据:cell-style="{ 'text-align': 'center' }" // 单元格样式，文本居中highlight-current-row // 高亮当前行style="width: 100%" // 表格宽度:header-cell-style="tableHeader" // 表头单元格样式:cell-style="tableContent" // 表格内容样式// 表头行样式，背景色和文字颜色:header-row-style="{ background: '#091e50', color: 'white' }" // 表格行样式，背景色和文字颜色 :row-style="{ background: '#091e50', color: 'white' }" <!-- 全选显示列 -->type="selection"<!-- 表格内容列 -->header-align="center" // 表头文本居中min-width="20%" // 最小列宽度label="开始时间" // 表头标签property="startTime" // 对应数据属性<!-- 已选项数量提示和分页 -->:indeterminate="isIndeterminate" // 部分选中状态v-model="checkAll" // 双向绑定全选状态@change="handleCheckAllChange" // 全选状态变化时的处理方法<!-- 分页组件 -->@size-change="handleSizeChange" // 页面大小变化时的处理方法@current-change="handleCurrentChange" // 当前页变化时的处理方法:page-sizes="[10, 20, 30, 40, 50]" // 可选择的每页显示数量layout="total, sizes, prev, pager, next, jumper" // 分页组件布局:current-page="currentPage" // 当前页:page-size="params.pageSize" // 每页显示数量:total="total" // 总数据量二. 参数属性
// 表格参数tableData: [],tableLoading: false,// 已选参数multipleSelection: [],checkAll: false, // 全选框状态isIndeterminate: false, // 全选框的中间状态// 分页参数params: { pageNum: 1, pageSize: 10 },currentPage: 1,total: 0,三. 函数事件
// 表头样式
tableHeader({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0) {//第一行return `font-weight: bolder;background-color:#091e50;color:white;font-size:20px;`;}
},
// 表格内容样式
tableContent({ row, column, rowIndex, columnIndex }) {// if (columnIndex === 1) {// return "color:blue;text-align:center;background-color:#72a4dd;";// }return `color: gray;text-align: center; font-size:14px;font-weight:600;font-family:"宋体";`;
},// 表格的全选事件
handleSelectionChange(val) {this.multipleSelection = val;this.checkAll = val.length === this.tableData.length;this.isIndeterminate =val.length > 0 && val.length < this.tableData.length;
},
// 删除选中项的方法
deletemultipleSelection() {// 获取选中的项的ID数组const ArrUuid = this.multipleSelection.map((cur) => {return cur.id; // 返回每个选中项的ID});// 显示确认对话框，确认是否永久删除选中项this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {confirmButtonText: "确定", // 确认按钮的文本cancelButtonText: "取消", // 取消按钮的文本type: "warning", // 提示类型，警告}).then(() => {// 用户确认删除后的操作// 开启加载状态this.tableLoading = true;// 调用删除操作的接口方法，传入选中项的ID数组delbypassControl(ArrUuid).then((res) => {// 接口请求成功后的处理console.log(res);if (res.code === 200) {// 删除成功后显示提示信息this.$message({message: "删除成功", // 提示信息内容type: "success", // 提示类型，成功center: true, // 提示信息文字居中offset: 400, // 提示信息的垂直位置偏移量});// 调用刷新数据的方法this.callbypassControl();}}).catch(() => {// 接口请求失败后的处理this.tableLoading = false; // 关闭加载状态}).finally(() => {// 接口请求完成后的处理this.tableLoading = false; // 关闭加载状态});}).catch(() => {// 用户取消删除操作后的处理// 显示取消删除的提示信息this.$message({type: "info", // 提示类型，信息message: "已取消删除", // 提示信息内容offset: 400, // 提示信息的垂直位置偏移量});});
}// 分页函数
handleSizeChange(val) {console.log(`每页 ${val} 条`);this.params.pageSize = val;// this.callbypassControl();
},
handleCurrentChange(val) {console.log(`当前页: ${val}`);this.params.pageNum = val;// this.callbypassControl();
},四. 元素样式
// 父级
position: relative;
padding-bottom: 50px;// 元素
.btm_choseBox {width: 100%;height: 50px;position: absolute;left: 20px;bottom: 15px;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;
}
::v-deep .selected_items {display: flex;justify-content: flex-start;align-items: center;.el-checkbox__label {margin: 0px 20px 0px 10px;}label {color: white;}button {background-color: rgba(192, 192, 192, 0.479);border: none;color: white;}
}
.el-pagination {height: 100%;box-sizing: border-box;padding-right: 20px;text-align: right;display: flex;justify-content: flex-end;align-items: center;
}五. Pagination分页补充，分页样式
// 输入框中的文字颜色
::v-deep input {color: white !important;
}
// loading背景色
::v-deep .el-loading-mask {background-color: rgba(0, 0, 0, 0.479);
}// el-pagination分页的背景和文字颜色
::v-deep .el-pagination {// 两边文字.el-pagination__total {color: white !important;}.el-pagination__jump {color: white !important;}// 两个输入框.el-input__inner {background-color: #092546;border: 1px solid rgba(192, 192, 192, 0.479);color: white !important;}// 左右按键和里面的图标button {background-color: #092546;.el-icon::before {color: white;}}// 分页数字ul {color: white;.el-icon::before {color: white !important;}}// 分页数字的背景色ul > li {background-color: #092546;}
}
::v-deep .el-loading-mask {background-color: rgba(0, 0, 0, 0.479);
}六. Table和Pagination，更多操作
Element官网
https://element.eleme.cn/#/zh-CN/component/table
