vue如何通过render渲染出不同的显示，具体问题如下

本来想要实现下面的效果：

我自己这么写的，最后面的*不会变成红色

render: (h, params) => {
                            return h('a', {
                                style: {
                                    cursor: 'pointer'
                                }
                            }, params.row.ItemName + '<style="color:red">*');
                        }

render里面该怎么拼接才会实现图片所演示的效果呢？求大神帮忙不胜感激

 render: (h) => {
                return h('div', {　
                    style: {　　　　　　　　　　　　　　　　　　　　　　
                        cursor: 'pointer'　　　　　　　　　　　　　　　　　　　
                    },
                    on: {
                        click: () => {
                            console.log('点击事件')
                        }
                    },
                    domProps: {
                        innerHTML: `类别<span style="color:red">*</span>`
                    }
                })
            }

render: (h, params) => {
                                return h('span', {
                                    style: {}
                                },
                                    [h('span',
                                        {
                                            style: {}
                                        }, params.row.ItemName),
                                    h('span', {
                                        style: {
                                            color: 'red',
                                        }
                                    }, "*")]
                        }