vue3如何使用element-plus的el-table组件展示图片表格

呆鱼敲代码

已于 2023-11-04 16:14:06 修改

阅读量6.3k

点赞数 20

文章标签： vue.js elementui javascript

于 2023-11-04 13:49:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_63128300/article/details/134217063

版权

由于图片展示需要用到当前行的图片地址，然后配合img标签进行展示，el-table-column不能直接展示图片，所以这个问题该如何解决呢？如何不借助v-for直接拿到当前行的数据呢？

想了半天没想出来，翻来覆去查资料都没看懂，后面发现了一个v-slot内置指令，这个用于声明具名插槽或是期望接收 props 的作用域插槽。有了这个，我们就可以获取当前展示行的数据内容了。

展示效果：

不过后来细看element-plus官网，发现其实人家官网对这个问题还专门有了一个解答了，在el-table部分的最底下那，（`#`为v-slot的缩写）

以下是我的代码+讲解：

script：

（图片地址是网上随手找来的，都是一样的，只是来模拟一下要展示的数据）

const dataList = ref([
    {
        imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
    },
    {
        imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
    },
    {
        imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
    },
    {
        imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
    },
    {
        imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
    },

])

template:

<el-table :data="dataList" :border="true">
                <el-table-column type="index" width="50px"></el-table-column>
                <el-table-column label="图片" width="150px">
                    <template #default="scope">
                        <el-image :src="scope.row.imgUrl"></el-image>
                    </template>
                </el-table-column>
            </el-table>

scope接收作用域，scope.row则为当前展示行的数据，scope.row.imgUrl则为当前展示行的图片地址。拿到了图片地址，我们就可以直接在里面借助img标签对图片进行展示了。

这种用法当然不局限于展示图片，既然知道了如何获取当前展示行的数据，我们就能够自定义展示效果了。比如同时展示图片与图片描述

只需要将自定义内容加在template中就行了

<el-table :data="dataList" :border="true">
                <el-table-column type="index" width="50px"></el-table-column>
                <el-table-column label="图片" width="150px">
                    <template #default="scope">
                        <el-image :src="scope.row.imgUrl" style="width:100px ;"></el-image>
                        <div style="text-align: center;width: 100px;">美景</div>
                    </template>
                </el-table-column>
            </el-table>