简述：在 Element UI 中，Table组件是一个功能强大的数据展示工具，用于呈现结构化的数据列表。它提供了丰富的特性，使得数据展示不仅美观而且高效。而Pagination组件是一个用于实现数据分页显示的强大工具。它允许用户在大量数据中导航，通过控制每页显示的数据数量和跳转到不同的页面，从而提高数据展示的效率和用户体验。简单记录
一. HTML
//表格
<el-table
@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' }"
>
// 表格内容
// 全选显示
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
header-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
