vue+ iview Table表格插入图片显示不同状态

最新推荐文章于 2023-01-13 15:11:17 发布

qq_36165747

最新推荐文章于 2023-01-13 15:11:17 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue iview table render image

本文链接：https://blog.youkuaiyun.com/qq_36165747/article/details/82688045

本文介绍了如何在Vue+IView的Table组件中利用render函数根据后台返回的状态动态加载不同图片，以展示数据的不同状态，如选中、红色动图和灰色状态图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做的项目需求是表格里需要用图片提示下当前数据的状态

选中的及是用的图片做的，红色的是gif图灰色的即是另外一种状态。实现方法：

主要是iview Table表格里的render函数处理的，上可视代码：

{
    title: '状态',
    key: 'state',
    align: 'center',
    render: (h, params) => {
        var Retain = params.row.state;
        if (state== "true" ) {
            return h('div',[
                h('img', {
                    attrs: {
                        src:require('loading.gif')
                    }
                },)]
            );
        }else{
            return h('div',[
                h('img', {
                    attrs: {
                        src:require('loading.png')
                    }
                },)]);
        }

    }
},

根据后台返回的状态不同，加载的图片不同。完美实现