当前位置：首页 > news >正文

特殊三列布局需求

news 2025/11/7 7:44:10

实现完成的功能：

1.三列布局：使用 flex 布局，三列等宽展示

2.第一页特殊布局：

左列：显示 tableDataOne（table1）的数据（最多15条）

中列：显示 tableData（table2）的第 1-15 条

右列：显示 tableData（table2）的第 16-30 条

3.后续页布局（table2 超过 30 条时）

左列：table2 的第 31-45 条
中列：table2 的第 46-60 条

右列：table2 的第 61-75 条

以此类推，每页45条（3列 × 15条）

4.分页功能：当 table2 数据超过 30 条时，自动显示分页器

实现html部分

 <div class="table-container"><!-- 左列 --><div class="table-column"><el-table :data="leftColumnData" border stripe style="width: 100%" height="100%"><el-table-column prop="id" label="ID" align="center" width="80"></el-table-column><el-table-column prop="name" label="名称" align="center"></el-table-column><el-table-column prop="deviceNo" label="设备编号" align="center"></el-table-column><el-table-column prop="status" label="状态" align="center"><template slot-scope="scope"><span :style="{color: scope.row.status == '1' ? '#67C23A' : '#F56C6C'}">{{ scope.row.status == '1' ? '在线' : '离线' }}</span></template></el-table-column></el-table></div><!-- 中列 --><div class="table-column"><el-table :data="middleColumnData" border stripe style="width: 100%" height="100%"><el-table-column prop="id" label="ID" align="center" width="80"></el-table-column><el-table-column prop="name" label="名称" align="center"></el-table-column><el-table-column prop="deviceNo" label="设备编号" align="center"></el-table-column><el-table-column prop="status" label="状态" align="center"><template slot-scope="scope"><span :style="{color: scope.row.status == '1' ? '#67C23A' : '#F56C6C'}">{{ scope.row.status == '1' ? '在线' : '离线' }}</span></template></el-table-column></el-table></div><!-- 右列 --><div class="table-column"><el-table :data="rightColumnData" border stripe style="width: 100%" height="100%"><el-table-column prop="id" label="ID" align="center" width="80"></el-table-column><el-table-column prop="name" label="名称" align="center"></el-table-column><el-table-column prop="deviceNo" label="设备编号" align="center"></el-table-column><el-table-column prop="status" label="状态" align="center"><template slot-scope="scope"><span :style="{color: scope.row.status == '1' ? '#67C23A' : '#F56C6C'}">{{ scope.row.status == '1' ? '在线' : '离线' }}</span></template></el-table-column></el-table></div></div><!-- 分页 --><div class="pagination-container" v-if="totalPages > 1"><el-pagination@current-change="handleCurrentChange":current-page="currentPage":page-size="1":total="totalPages"layout="prev, pager, next"></el-pagination></div>

实现css部分

/* 三列表格布局 */.table-container {display: flex;justify-content: space-between;gap: 2%;width: 100%;height: calc(100% - 10vh);}.table-column {flex: 1;min-width: 0;overflow: auto;}.pagination-container {margin-top: 1vh;text-align: center;}

js实现部分

computed: {// 计算总页数totalPages() {// table2 超过30条才需要分页，第一页显示 table1 + table2前30条// 后续每页45条（3列 × 15条）if (this.tableDataTwo.length <= 30) {return 1;}// 第一页：table1 + table2的前30条// 后续页：每页45条 table2 的数据const remainingData = this.tableDataTwo.length - 30;return 1 + Math.ceil(remainingData / 45);},// 左列数据leftColumnData() {if (this.currentPage === 1) {// 第一页：左列显示 table1（设备状态数据）return this.tableData.slice(0, this.itemsPerColumn);} else {// 后续页：左列显示 table2 的数据// 第一页已显示30条，所以从第31条开始// (currentPage - 2) 表示跳过第一页，从第二页开始计算const startIndex = 30 + (this.currentPage - 2) * 45;return this.tableDataTwo.slice(startIndex, startIndex + this.itemsPerColumn);}},// 中列数据middleColumnData() {if (this.currentPage === 1) {// 第一页：中列显示 table2 的第1-15条return this.tableDataTwo.slice(0, this.itemsPerColumn);} else {// 后续页：中列显示 table2 的数据const startIndex = 30 + (this.currentPage - 2) * 45 + this.itemsPerColumn;return this.tableDataTwo.slice(startIndex, startIndex + this.itemsPerColumn);}},// 右列数据rightColumnData() {if (this.currentPage === 1) {// 第一页：右列显示 table2 的第16-30条return this.tableDataTwo.slice(this.itemsPerColumn, this.itemsPerColumn * 2);} else {// 后续页：右列显示 table2 的数据const startIndex = 30 + (this.currentPage - 2) * 45 + this.itemsPerColumn * 2;return this.tableDataTwo.slice(startIndex, startIndex + this.itemsPerColumn);}}},

查看全文

http://www.dtcms.com/a/577159.html