打印标签时判断是否显示内容

业务需求： 判断一个字段是否有值。如果有值则把条形码变窄，如果没值则不显示

1. 首先时单个打印。这个注意模态框的缓存，当你关闭的时候缓存是不会清理的。

<template>
  <a-modal
    v-drag-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    >

    <div ref="print1" id="aaa" >
      <a-form :form="form" >
        <a-form-item style="margin-bottom: -20px;text-align: center;">
          <svg id="barcode"></svg>
        </a-form-item>
        <a-form-item style="margin-bottom: -10px">
          <a-input style="text-align: center; border: none; font-size: 24px; color: black;" v-decorator="['simpleBankName',{}]" />
        </a-form-item>
        <a-form-item style="margin-bottom: -15px">
          <a-input style="text-align: center; border: none; font-size: 35px;font-weight: bold; color: black;" v-decorator="['labelId',{}]" />
        </a-form-item>
        <a-form-item v-if="show" style="margin-bottom: -15px; ">
          <div style="width: 100%; position: relative;display: flex; justify-content: center">
            <div style="width: 100px"></div>
            <div
                 contenteditable="true"
                 style="
            text-align: right;
            border: none;
            font-size: 18px;
            color: black;
            width: 150px;
            " >
              {{this.subOrgCode}}
            </div>
          </div>

        </a-form-item>
      </a-form>
    </div>

    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button  type="primary" v-print="'#aaa'" @click="print()" style="text-align: center;">打印</a-button>
    </template>

  </a-modal>
</template>

<script>
  export default {
    data () {
      return {
        codeSize: 30,
        show: false,
      }
    },
    created () {
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        console.log("------------")
        console.log(record)
        let that = this
        that.form.resetFields();
        var tem=record.simpleBankName
        record.simpleBankName=record.simpleBankName+' '+'  '+record.busiCodeName
        that.model = Object.assign({}, record);
        that.visible = true;
        that.packageNo = record.packageNo;
        that.$nextTick(() => {
          that.form.setFieldsValue(pick(that.model,'simpleBankName','busiCodeName','packageNo','status','writeInFlag','labelId','suborgcode'))
          record.simpleBankName=tem
          that.subOrgCode = record.suborgcode
          console.log(this.subOrgCode)
          console.log('显示文本信息！------------------------------------------');
          console.log(this.subOrgCode)
          if (!that.subOrgCode){
            that.codeSize = 60
            that.show = false
          } else {
            that.codeSize = 40
            that.show = true
          }
          JsBarcode("#barcode", that.packageNo,
            {
              width:2,
              height: that.codeSize,
              text:that.packageNo
            });
        });
      },
    }
  }
</script>

• that.subOrgCode = record.suborgcode 在获取到值得时候把值传给data中的变量
• 如果有值show的值就为true，则显示。没有就为false，则不显示。
• CodeSize条形码高矮

踩坑：

• 一开始只赋值了true，因为默认为false，那么只要v-if中的内容显示，关闭模态框的时候不会清楚数据，下次点开模态框仍然为true。则一直显示。

二、 循环打印。

<div id="batchModal" ref="batchModal" style="text-align: center;">
      <div v-for="item in recordList" :key="item.packageNo" style="page-break-after:always;text-align: center">
        <div style="margin:0 auto;margin-left: 0px">
          <svg :id="item.packageNo" width ="50px" height ="50px"></svg>
        </div>
        <div style="margin-top: -12px; text-align: center">
          <div style="z-index: 2;margin:0 auto;margin-left: 0px;text-align: center;width: 100%;">
            <div contenteditable="true" style="word-spacing:10px;resize:none; position: relative; text-align: center; border: none; font-size: 24px; color: black;height: 70px;max-height: 45px;z-index: 1; overflow:hidden;">{{item.simpleBankName}}  {{item.busiCodeName}}</div>
          </div>
          <div style="z-index: 1;margin:0 auto;margin-left: 0px;text-align: center; width: 100%;">
            <div contenteditable="true" style="word-spacing:18px;position: relative; margin-top: -20px;  text-align: center;border: none; font-size: 35px;font-weight: bold; color: black; z-index: 2; overflow:hidden;">{{item.labelId}}</div>
          </div>
          <div v-if="item.suborgcode ? item.suborgcode : false" style="margin-top: -13px;z-index: 2; margin-left: 0px;text-align: center;width: 100%;display: flex; justify-content: center">
            <div style="width: 100px"></div>
            <div contenteditable="true" style="
            width: 150px;
            text-align: right;
            border: none;
            font-size: 18px;
            color: black;
            max-height: 45px;
            float: left;
            overflow:hidden;">{{item.suborgcode}}
            </div>
          </div>
        </div>
        <!--          </div>-->
        <!--        </div>-->
      </div>
      </div>

• 因为是循环显示，v-if只要判断是否有值就可以了v-if=“item.suborgcode ? item.suborgcode : false”