vue+el-table 列表序号列分页后自动计算序号值

<el-table
        v-loading="loading"
        :data="onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
        style="width: 100%"
      >
        <el-table-column label="序号" width="50" type="index" align="center">
          <template #default="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
        <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
        <el-table-column label="客户端" align="center" prop="clientKey" :show-overflow-tooltip="true" />
        <el-table-column label="设备类型" align="center">
          <template #default="scope">
            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
          </template>
        </el-table-column>
</el-table>
定义属性:
const queryParams = ref<OnlineQuery>({
  pageNum: 1,
  pageSize: 10,
});
表达式:
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
### 使用 `vue-print-nb` 打印 `el-table` 常见问题解决方案 #### 一、Table 序号打印错乱问题 当使用 `vue-print-nb` 打印 `el-table` 时,如果发现序号打印错乱,可以通过调整 CSS 样式来解决问题。具体方法如下: 通过设置 `.el-table .el-table__cell.is-hidden > * { visibility: visible; font-size: 12px; }` 可以确保隐藏的内容在打印时可见[^1]。 ```css ::v-deep .el-table .el-table__cell.is-hidden > * { visibility: visible; font-size: 12px; } ``` --- #### 二、表格边框不显示问题 在打印过程中,由于默认情况下浏览器不会保留原有样式的边框效果,因此需要手动覆盖样式以确保边框正常显示。可以尝试以下方式解决此问题: 重新定义打印区域内的表格样式,例如添加 border 属性,并将其应用到目标组件上[^2]。 ```css @media print { .el-table td, .el-table th { border: 1px solid #ebeef5 !important; } .el-table::before, .el-table--border, .el-table--group { border-color: #ebeef5 !important; } } ``` --- #### 三、表格打印不全问题 对于某些情况下的宽屏数据表,在实际打印时可能会因为页面宽度限制而无法完全展示所有列的数据。这是由于浏览器计算的屏幕像素比例与物理打印机分辨率存在差异所致[^3]。 一种有效的办法是动态调整每列宽度或者固定整体布局尺寸,从而适应 A4 或其他标准纸张大小的要求。以下是实现代码片段的一个例子: ```javascript methods: { handlePrint() { this.$nextTick(() => { const tableWidth = document.querySelector('.el-table').offsetWidth; const colGroups = document.querySelectorAll('.el-table>colgroup>col'); let totalWidth = 0; Array.from(colGroups).forEach((item) => { item.style.width = `${(parseInt(item.getAttribute('width')) / tableWidth) * 793}px`; totalWidth += parseInt(item.style.width); }); console.log(`Total adjusted width is ${totalWidth}`); }); }, }, ``` 上述逻辑中,我们先获取整个表格的实际宽度,再按比例分配给各个子项的新宽度(假设最终输出介质为A4横向模式下最大可用空间约为793px)。这样即使原始设计超出常规范围也能较好适配硬件设备特性需求。 --- #### 四、分页及自定义页脚处理 为了支持多页文档中的连续记录以及统计汇总功能,则需引入额外机制完成分割操作并附加相应信息至各独立区块底部位置处[^4]。 下面是一个简单的 Vue 模板实例演示如何利用循环渲染技术生成多个小型局部视图单元供后续组合拼接成完整的报告形式文件结构: ```html <template> <div id="print-area"> <!-- 动态创建若干个表格 --> <table v-for="(chunk, index) in paginatedData" :key="index" class="my-table"> <thead> <tr> <th v-for="(header, hIndex) in headers" :key="'h' + hIndex">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in chunk" :key="'r' + rowIndex"> <td v-for="(cell, cellIndex) in row" :key="'c' + cellIndex">{{ cell }}</td> </tr> </tbody> <tfoot> <tr> <td colspan="{{headers.length}}">Page {{ index + 1 }} of {{ totalPages }}</td> </tr> </tfoot> </table> </div> </template> <script> export default { data() { return { allRows: [], // 完整数据集 pageSize: 20, // 每页条目数量 }; }, computed: { paginatedData() { const result = []; for (let i = 0; i < this.allRows.length; i += this.pageSize) { result.push(this.allRows.slice(i, i + this.pageSize)); } return result; }, totalPages() { return Math.ceil(this.allRows.length / this.pageSize); }, }, }; </script> ``` 在此基础上还可以进一步扩展更多高级选项比如自动累加总计数等功能模块满足特定业务场景下的复杂报表生成功能要求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值