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

原创

于 2018-09-13 14:54:29 发布 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #iview #table #render #image

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

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

选中的及是用的图片做的，红色的是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')
                    }
                },)]);
        }

    }
},

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