一、安装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
}