vue 通过表格某列生成二维码,我是通过列的render方法实现不可以,请问该如何实现?

wangxi得 发布于 2020/02/21 18:01
阅读 592
收藏 0

实现思路如下:

1.前提已经导入了依赖

import QRcode from "qrcodejs2";

2.比如以下列

columns: [
{ prop: "tube_qrcode", label: "管子二维码",
  render: (h, params) => {
    return h('div', {attrs: {class: 'flexLay'}},
      [h('qrcode', {
      attrs: {
        text: "http://www.baidu.com",
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRcode.CorrectLevel.L//容错率,L/M/H
      },
    })
      ])
  } ]

页面渲染没有效果:

3.渲染后的源码,发现并没有编译成base64位图片,源码如下:

<qrcode data-v-e7a4c540="" value="http://www.baidu.com" text="http://www.baidu.com" width="200" height="200" colordark="#333333" colorlight="#ffffff" correctlevel="1"></qrcode>

 

加载中
0
chentao106
chentao106
render方法相当于编译后的代码,不会再编译了。这里不要用render方法,用template
chentao106
chentao106
回复 @wangxi得 : h('qrcode' 改为 h(qrcode 试试,即把组件名改为组件实例的引用
wangxi得
wangxi得
回复 @wangxi得 : 主要想在js中实现,因为后端返回地址时候,通过js方法实现转换二维码,另外表格列是进行JS封装的,在页面上使用template不方便。
wangxi得
wangxi得
请问template再那里添加呢?能给个思路吗?多谢
0
chentao106
chentao106

组件名改组件原型对象,新测有效:

render: h => {
  return h('div', {attrs: {class: 'flexLay'}},
    [h(QRCode, {
      attrs: {
        text: "http://www.baidu.com",
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
      },
    })
    ])
}
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部