element.ui的关于表格中使用图片的问题

element的table组件可以自定义显示的列，可以通过 Scoped slot 可以获取到 row, column

 <el-table-column label="姓名" width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
  </el-table-column>
  <el-table-column label="操作">
     <template slot-scope="scope">
       <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
       <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }

关于使用图片的问题,一开始百度看到很多使用的是scope=”scope”,但是发现报错，改用solt-scope=”scope”就可以了

单张

<el-table-column label="头像" width="100">
    <template slot-scope="scope">
        <img :src="scope.row.head_pic" class="head_pic"/>
    </template>
</el-table-column>

多张

<el-table-column prop="pictures" label="描述图片">
　　<template slot-scope="scope">
　　　　<img v-for="item in scope.row.pictures" :src="item"  class="head_pic"/>
　　</template>
</el-table-column>

关于图片放大

现在碰到的一个需求就是当鼠标移到图片上面放大，移走恢复原样
使用一个hover时间修改样式就可以解决