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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值