Vue+elementUi+table 中显示图片

最新推荐文章于 2024-01-07 11:15:27 发布

weixin_46098754

最新推荐文章于 2024-01-07 11:15:27 发布

阅读量481

点赞数 1

文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46098754/article/details/128478754

版权

话不多说，先看效果

下面是Vue代码

   <el-table-column label="识别照片" :formatter="formatter1">
                <template scope="scope">
                    <img :src="scope.row.img" width="40px" height="40px" />
                </template>
            </el-table-column>

接下来是JS代码

<script>
export default {
    data() {
        return {
            tableData: [{
                id: '1',
                address: '十五栋楼下消防栓',
                tag: '未处理',
                remarks: '在漏水，请尽快解决',
                img: 'https://bkimg.cdn.bcebos.com/pic/1e30e924b899a9016d4692101d950a7b0208f5a1?x-bce-process=image/resize,m_lfit,w_440,limit_1'
            }, {
                id: '3',
                address: '十五栋楼下消防栓',
                tag: '未处理',
                remarks: '在漏水，请尽快解决',
                img: 'https://bkimg.cdn.bcebos.com/pic/1e30e924b899a9016d4692101d950a7b0208f5a1?x-bce-process=image/resize,m_lfit,w_440,limit_1'
            }, ]
        }
    },
    methods: {
        formatter1(row, column) {
            return row.img;
        }
    }
}
</script>