设置多条数据会自动分页

云白冰

已于 2024-02-22 17:12:50 修改

阅读量344

点赞数 7

文章标签：前端开发语言 css vue.js html

于 2024-02-22 17:10:56 首次发布

本文链接：https://blog.csdn.net/weixin_52115201/article/details/136238802

版权

    computed: {
      //当前页的行高超出当前页的高度会自动转成新增一页显示剩下的内容
      splitInfo() {
        const rowHeight = 40; // 每行的高度为30px
        const pageHeight = 600; // 假设每页的高度为420px
        const pages = [];
        let currentPage = [];
        let currentHeight = 0;
        this.tableData.forEach(item => {
          if (currentHeight + rowHeight <= pageHeight) { // 判断当前行加入后是否超过页高
            currentPage.push(item);
            currentHeight += rowHeight;
          } else {
            pages.push(currentPage);
            currentPage = [item];
            currentHeight = rowHeight;
          }
        });
        let remainingEmptyHeight = pageHeight - currentHeight; // 计算最后一页还剩余的空白高度
        if (remainingEmptyHeight > rowHeight) { // 如果剩余空白高度足够容纳一行
          const emptyRowCount = Math.floor(remainingEmptyHeight / rowHeight); // 计算需要添加的空白行数
          for (let i = 0; i < emptyRowCount; i++) {
            currentPage.push({ isEmptyRow: true }); // 添加空白行数据
          }
        }
        if (currentPage.length > 0) {
          pages.push(currentPage);
        }
        return pages;
      },
    },

其中的this.tabledate是表格的数据

内容区应该这么写

 <div ref="print"  v-for="(page, i) in splitInfo" :key="i">
   <p style="display: flex;justify-content: space-between;margin-top: 10px;"><span>患者姓名：{{ $store.state.patnow.name }}</span></p>
   <table ref="mytable" style="width: 100%;" border='1' cellpadding='0' cellspacing='0' >
     <tr>
       <td style='width: 40px;line-height: 20px;' align='center'></td>
       <td style='width: 90px;line-height: 20px;' align='center'>列名</td>   
       <td  align='center' style="line-height: 20px;">列名</td>
       <td style='width:80px;line-height: 20px;' align='center'>列名</td>
       <td  style='width: 100px;line-height: 20px;' align='center'>列名</td>
       <td  style='width: 80px;line-height: 20px;' align='center'>列名</td>
     </tr>
     <tr v-for="(item, i) in page" :key="i">
       <td style="text-align: center;word-break: break-all;height: 40px;line-height: 20px;">{{ i+1 }}</td>
       <td style="text-align: center;word-break: break-all;height: 40px;line-height: 20px;">{{ item.date}}</td>
       <td style="text-align: center;word-break: break-all;height: 40px;line-height: 20px;">{{ item.feeName}}</td>
       <td style="text-align: center;word-break: break-all;height: 40px;line-height: 20px;">{{ item.attendDoc }}</td>
       <td ></td>
       <td ></td>
     </tr>
   </table>
   <p style="text-align: center;">第&nbsp;{{ i + 1 }}&nbsp;页</p>
  </div>

直接在需要遍历的div进行整个循环，内容区的table第一行的tr是列名，第二行tr开始写内容遍历

如果这个页面是需要打印的，点击打印按钮的代码是

 print(){
        const printContent = this.$refs.print;
        const printWindow = window.open('', '_blank');
        const htmlContent = `
            <html>
              <head>
                <title>打印</title>
                <style>
                  @media print {
                    @page {
                      size: A4; /* 设置打印页面尺寸为A4 */
                    }
                    /* 打印页的CSS样式 */
                    * {
                      padding: 0;
                      margin: 0;
                      font-size: 11pt;
                      font-family: "宋体";
                      line-height: 30px;
                    }
                </style>
              </head>
              <body>
                ${printContent.map(content => content.innerHTML).join('')}
              </body>
            </html>
          `;
          
          printWindow.document.write(htmlContent);
          printWindow.document.close();

          printWindow.onload = () => {
            printWindow.print();
            printWindow.close();
          };
      }