vue+elementui如何实现在表格中点击按钮预览图片？

最新推荐文章于 2024-04-11 17:21:44 发布

原创最新推荐文章于 2024-04-11 17:21:44 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

该文章介绍了如何在Vue.js项目中结合ElementUI的el-table和el-image-viewer组件来创建图片预览功能。当用户点击特定行时，会显示图片预览，预览列表可通过`previewList`设置，并在关闭预览时恢复页面滚动。

1.首先在<el-table>的下面用预览图片的组件：

<el-image-viewer v-if="showImagePreview" :url-list="previewList" hide-on-click-modal teleported :on-close="closePreview"  style="z-index:3000" />

2.在引入

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
        ElImageViewer
    },
  methods:{
    handleClick(row){
      if(row.date==1)
      {
        this.previewList=[require('../../../assets/image/zj_1.png')]
        document.body.style.overflow = 'hidden';
        this.showImagePreview= true
      };
    },
    closePreview(){
            this.showImagePreview= false;
            document.body.style.overflow = 'auto';
    },
  },
  data() {
    return {
      showImagePreview: false,
      previewList:[],
    }
  },
};
</script>

3.实现效果如下：