打印功能vue 插件$print

1. 使用div进行布局-table表格调试会比较困难/ html部分
至于安装$print组件可以到百度上找、分享一下打印的想法。我使用的时候组件已经安装好，所有哈哈哈自行百度

  <el-button
          @click="handlePrint"
          type="info"
          size="mini"
          icon="el-icon-printer"
          >打印</el-button
        >
<div style="display:none">
      <div ref="stamp" style="width:100%;">
        <div
          v-for="(t, i) in pagenum"
          :key="i"
          class="content"
          style="page-break-after: always;"
        >
          <div ref="headers" style="width: 100%;text-align: center;">
            <div>
              <span style="font-size: 24px;">分支机构名称</span><br />
              <span style="font-size: 20px;">分销订单</span>
            </div>
          </div>

          <hr />
          <div ref="centers" style="margin: 0 auto;padding: 0;width: 100%;">
            <ul
              style="display: inline-block;display: flex;flex-wrap: wrap;padding: 0; margin:0;"
            >
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                客户名称: <span>{
  { MainData.contactor }}</span>
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                联系电话 {
  { MainData.contacttel }}
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                单号 <span> {
  { MainData.billcode }}</span>
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                联系人 <span>{
  { MainData.contact }}</span>
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                联系手机 <span>{
  { MainData.contactphone }}</span>
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                下单日期 <span>{
  { MainData.billdate }}</span>
              </li>
              <li
                style="display: inline-block;width: 66.66%;font-size: 16px;margin: 5px 0;"
              >
                客户地址
                <span>{
  {
                  MainData.address1 +
                    "/" +
                    MainData.address2 +
                    "/" +
                    MainData.address3 +
                    "/" +
                    MainData.address4
                }}</span>
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                交货日期 <span>{
  { MainData.revdate }}</span>
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                说明 <span>{
  { MainData.remark }}</span>
              </li>
            </ul>
            <div class="table-box" style="width:100%">
              <div
                class="tableHead"
                style="margin: 0 auto;width: 100%;border: 1px solid #000;padding: 2px;border-bottom: 0;background: #909399;font-weight: 700;"
              >
                订单明细
              </div>
              <div>
                <ul style="padding:0;margin:0;">
                  <li
                    style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 8%;border: 1px solid #000;"
                  >
                    序号
                  </li>
                  <li
                    style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 18%;border: 1px solid #000;"
                  >
                    货品编码
                  </li>
                  <li
                    style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 20%;border: 1px solid #000;"
                  >
                    货品名称
                  </li>
                  <li
                    style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 16%;border: 1px solid #000;"
                  >
                    规格
                  </li>
                  <li
                    style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 12%;border: 1px solid #000;"
                  >
                    颜色
                  </li>
                  <li
                    style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 8%;border: 1px solid #000;"
                  >
                    数量
                  </li>
                  <li
                    style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 18%;border: 1px solid #000;"
                  >
                    备注
                  </li>
                </ul>

                <div>
                  <ol
                    v-for="(item, index) in vals"
                    :key="index"
                    style="width:100%;padding:0;margin:0;line-height:27px"
                  >
                    <div v-if="index >= 20 * i && index < 20 * (i + 1)">
                      <li
                        style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 8%;height:39px;border: 1px solid #000;"
                      >
                        <span v-text="index + 1"></span>
                      </li>
                      <li
                        style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 18%;height:39px;border: 1px solid #000;"
                      >
                        <span>{
  { item.goods_code }}</span>
                      </li>
                      <li
                        style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 20%;height:39px;border: 1px solid #000;"
                      >
                        <span>{
  { item.goods_name }}</span>
                      </li>
                      <li
                        style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 16%;height:39px;border: 1px solid #000;"
                      >
                        <span>{
  { item.specs }}</span>
                      </li>
                      <li
                        style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 12%;height:39px;border: 1px solid #000;"
                      >
                        <span>{
  { item.colour_name }}</span>
                      </li>
                      <li
                        style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 8%; height:39px;border: 1px solid #000;"
                      >
                        {
  { item.unitquantity }}
                      </li>
                      <li
                        style="padding: 5px 10px;float: left;list-style: none;margin: 0;width: 18%;height:39px;border: 1px solid #000;"
                      >
                        {
  { item.remark }}
                      </li>
                    </div>
                  </ol>
                  <div
                    style="width:100%;border:1px solid #000;padding:20px 10px 0px 10px;line-height:40px;"
                  >
                    <span>合计：{
  { totalNum }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

2. js部分

 data() {
    return {
      vals: [],//表格数据
       pagenum: 0,
    };
  },

computed: {
    // 计算总数量
    totalNum() {
      let count = 0;
      for (let item of this.vals) {
        count += parseInt(item.unitquantity);
      }
      return count;
    }
    
methods: {
    // 获取表格中选中的数据
    handleSelectionChange(val) {
      this.vals = val;
      console.log(this.vals);
    },
    // 打印
    handlePrint() {
      if (this.vals.length == 0) {
        this.pagenum = 1;
        console.log(this.pagenum);
      } else {
        // 页数
        this.pagenum = Math.ceil(this.vals.length / 20);
        console.log(this.pagenum);
      }

      setTimeout(() => {
        // 打印
        this.$print(this.$refs.stamp);
      }, 500);
    },



  }

3.css核心部分

@media print { 
  div.content { 
    page-break-after: always;
  }
}