JavaScript
iview

iView の Table コンポネントで画像を render する方法

iViewTable を使って、画像を表示しようとして、やり方がドキュメントになかったので、メモしたい

ソース

<template>
    <div>
         <Table :columns="columns" :data="tokens"></Table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            columns: [
                {
                    title: 'Name',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h('img', { attrs: { src: require(`../../images/${params.row.icon}`) } }),
                        ])
                    }
                },
            ]
        };
    },
};
</script>

ハマったポイント

  1. imgsrc を指定したいが、 props ではできず、attrs を使うとできました
  2. img のパスですが、該当ファイルからの相対パスだけでは画面上に表示できず、require(...)を入れるとできました。