Web前端之Vue+Element打印时输入值没有及时更新dom的问题

MENU

• html
• JavaScrip

---

html

<template>
  <div>
    <div id="refTableBox">
      <table>
        <thead>
          <tr>
            <th colspan="2" rowspan="2">评分项目</th>
            <th rowspan="2">分值</th>
            <th colspan="3">评估结果</th>
          </tr>
          <tr>
            <th>1次</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td colspan="3" class="fw_b ta_c">得分</td>
            <td>
              <el-input
                class="w_140 customInputBgm"
                v-model="formData.value1"
                type="text"
                placeholder="请输入分数"
              >
              </el-input>
            </td>
          </tr>
          <tr>
            <td colspan="3" class="fw_b ta_c">筛查日期</td>
            <td>
              <el-date-picker
                v-model="formData.value2"
                class="w_140 customInputBgm"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placement="bottom-start"
                placeholder="请选择日期"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td colspan="3" class="fw_b ta_c">筛查医生签字</td>
            <td>
              <el-input
                class="w_140 customInput"
                v-model="formData.value3"
                type="text"
                placeholder="请签字"
              >
              </el-input>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="printUpBox">
      <el-button type="info" size="mini" @click="printUp">打 印</el-button>
    </div>
  </div>
</template>

---

JavaScrip

export default {
  name: "test",
  components: {},
  data() {
    return {
      formData: {
        value1: "",
        value2: "",
        value3: ""
      },
    };
  },
  created() {
    // this.init();
  },
  methods: {
    // 初始化
    init() {},
    /**
     * 打印
     */
    printUp() {
      let dom = document.createElement("div");
      let styleNode = document.createElement("style");
      let targetNode = document.getElementById("refTableBox").cloneNode(true);

      styleNode.media = "print";
      styleNode.innerHTML = "@page { padding: 18px; box-sizing: border-box; }";
      dom.appendChild(styleNode);
      dom.appendChild(targetNode);

      // ---------及时拿到最新dom（start）---------
      const ref = document.getElementById("refTableBox");
      const domInput = ref.querySelectorAll("input");
      const domNode = targetNode.querySelectorAll("input");

      domInput.forEach((input, i) => {
        domNode[i].value = input.value;
        domNode[i].setAttribute("value", input.value);
      });
      // ---------及时拿到最新dom（end）---------

      // 如果想显示纯文字（可选，不支持日期图标，也就是先要去除日期图标才行）
      // domNode.forEach((input) => {
      //   const span = document.createElement("span");
      //   span.textContent = input.value || "";
      //   input.parentNode.replaceChild(span, input);
      // });

      // this.$print(dom);
    },
  },
};