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