Table列表显示图片,并查看大图

一张图片

<el-table-column

          prop="picUrl"

          label="图片"

          width="300"

          align="center"

        >

          <template slot-scope="scope">

            <el-popover placement="right" title="" trigger="hover">

              <img :src="scope.row.picUrl" />

              <img slot="reference" :src="scope.row.picUrl" :alt="scope.row.picUrl" style="max-height: 50px;max-width: 130px">

            </el-popover>

          </template>

        </el-table-column>

 

多张图片

<el-table-column

          prop="picUrl"

          label="图片"

          width="180"

          align="center"

        >

          <template slot-scope="scope">

              <span v-for="item in scope.row.picUrl.split(',')" v-bind:key="item">

                <el-popover 

                  placement="right"

                  title=""

                  trigger="hover">

                    <img :src="item" style="max-height: 340px !important;max-width:500px !important"/>

                    <img slot="reference" :src="item" :alt="item" 

                        style="max-height: 50px;max-width: 130px">

                </el-popover>

              </span>

          </template>

        </el-table-column>

 多图片返回的是‘，’分割的字符串，可以在接口返回数据时做转成数组操作，也可以在页面循环时做操作，可以给img添加style属性对图片宽高做限制。