vue 打印时显示输入框里的值

2024年5月18日 136次阅读 来源: yxm_136452789

问题，vue打印表单或表格时，显示值的的组件是输入框、单选框等，值不会在打印时显示。

解决代码

let newDomHtml = '';
	//找到放置内容的元素
      if(this.$refs.printbuild){ 
        let inputs = this.$refs.printbuild.$el;
        //得到所有的dom元素
        for (let k = 0; k < inputs.length; k++) { 
          if (inputs[k].type == "checkbox" || inputs[k].type == "radio") { 
            if (inputs[k].checked == true) { 
              inputs[k].setAttribute('checked', "checked")
            } else { 
              inputs[k].removeAttribute('checked')
            }
          } else if (inputs[k].type == "text") { 
            inputs[k].setAttribute('value', inputs[k].value)
          } else { 
            inputs[k].setAttribute('value', inputs[k].value)
          }
        }
        
        newDomHtml = this.$refs.printbuild.$el.innerHTML;
      }

之前百度的解决方法是用v-text属性，但是不太符合我的应用场景，我就没用它。

<el-input v-text="name"></el-input>

总结：

我的解决办法是用setAttribute() 方法添加value属性，并为其赋值。

    原文作者：yxm_136452789
    原文地址: https://blog.csdn.net/yxm_136452789/article/details/123498511
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞