【Vue.js---iView---Table 表格】在表格中显示多张图片，并为这些图片设置图片查看器，点击放大预览等

最终效果：

步骤：

一、安装v-viewer插件：
先npm install v-viewer--save，然后在main.js中写:

// 引入Viewer
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer);
Viewer.setDefaults({
    Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

二、在vue文件中写：

<template>
  <div>
    <Table border :columns="tableColumns" :data="tableData"></Table>
  </div>
</template>

<script>
    export default {
        data () {
            return {
                tableColumns: [
                    {
                        title: '作业名称',
                        key: 'name'
                    },
                    {
                        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)
                            }
                        }
                    }
                ],
                tableData: [
                    {
                        name: '数学',
                        resultAnswer: '<img src="http://liangziqi.top:81/meme-img/000-1-0.jpg"><img src="http://liangziqi.top:81/meme-img/003-122.jpg">'
                    },
                    {
                        name: '化学计算题',
                        resultAnswer: '<img src="http://liangziqi.top:81/meme-img/003-122.jpg">'
                    },
                    {
                        name: '物理',
                        resultAnswer: '我的答案我的答案'
                    }
                ]
            };
        },
        methods: {
            getImg (html) {
                var newHtml = []
                // 匹配图片（g表示匹配所有结果,i表示区分大小写）
                var imgReg = /<img.*?(?:>|\/>)/gi
                // 匹配src属性
                // eslint-disable-next-line no-useless-escape
                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
            }
        }
    };
</script>

另外：在vue中的写法，还有第二种，通过slot

<template>
  <div>
    <Table border :columns="tableColumns" :data="tableData">
      <template slot-scope="{ row, index }" slot="resultAnswer">
        <div
          v-if="row.resultAnswer && row.resultAnswer.indexOf('img') === -1"
          v-html="row.resultAnswer"
        ></div>
        <div v-else>
          <viewer :images="getImg(row.resultAnswer)">
            <img
              :src="item"
              alt=""
              v-for="(item, index) in getImg(row.resultAnswer)"
              :key="index"
              style="width: 20px;margin-right:6px"
            />
          </viewer>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                tableColumns: [
                    {
                        title: "作业名称",
                        key: "name",
                    },
                    {
                        title: "答案",
                        minWidth: 170,
                        key: "resultAnswer",
                        align: "center",
                        slot: "resultAnswer"
                    },
                ],
                tableData: [
                    {
                        name: "数学",
                        resultAnswer:
                            '<img src="http://liangziqi.top:81/meme-img/000-1-0.jpg"><img src="http://liangziqi.top:81/meme-img/003-122.jpg">',
                    },
                    {
                        name: "化学计算题",
                        resultAnswer:
                            '<img src="http://liangziqi.top:81/meme-img/003-122.jpg">',
                    },
                    {
                        name: "物理",
                        resultAnswer: "我的答案我的答案",
                    },
                ],
            };
        },
        methods: {
            getImg(html) {
                var newHtml = [];
                // 匹配图片（g表示匹配所有结果,i表示区分大小写）
                var imgReg = /<img.*?(?:>|\/>)/gi;
                // 匹配src属性
                // eslint-disable-next-line no-useless-escape
                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;
            },
        },
    };
</script>

我是通过这个连接知道此插件的【VUE】图片预览放大缩小插件