html表格中图片显示过大,在vue的Table的每个格子中显示多张图片，并为这些图片设置图片查看器，点击放大预览...

一、安装viewerjs依赖：

先npm install viewerjs --save，然后在main.js中写:import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)

Vue.use(Viewer, {

defaultOptions: {

zIndex: 9999,

title: false

}

})

二、在表格的Columns的某个列写(接口返回的resultAnswer中如果有图片的话，以img标签呈现)：{

title: '答案',

minWidth: 170,

key: 'resultAnswer',

align: 'center',

render: (h, params) => {

if (params.row.resultAnswer && params.row.resultAnswer.indexOf('img') === -1) {// 没图片

return h('div', {

domProps: {

innerHTML: params.row.resultAnswer

}

})

} else if (params.row.resultAnswer && params.row.resultAnswer.indexOf('img') !== -1) {// 有图片

var contentArr = []

var srcArr = this.getImg(params.row.resultAnswer)

var imgArr = []

srcArr.forEach((a) => {

imgArr.push(

h('img', {

attrs: {

src: a,

style: 'width: 20px;margin-right:6px'

}

})

)

})

contentArr.push(

h(

'viewer',

{

props: {

images: srcArr

}

},

imgArr

)

)

return h('div', contentArr)

}

}

}

三、在methods定义getImg方法，获取图片src数组：getImg (html) {

var newHtml = []

// 匹配图片(g表示匹配所有结果,i表示区分大小写)

var imgReg = /|\/>)/gi

// 匹配src属性

var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i

var arr = html.match(imgReg)

for (var i = 0; i < arr.length; i++) {

var src = arr[i].match(srcReg)

// 获取图片地址

newHtml.push(src[1])

}

return newHtml

}