问题,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属性,并为其赋值。