Naiveui+Vue3如何在数据表中使用复杂组件

用Naiveui+Vue3做后台系统的数据列表时，想用到比较复杂点的组件怎么用呢，比如

先用naiveui官方提供的示例代码，可以做出简单的开关样式

    {
        title: "状态",
        key: "status",
        width: 100,
        render(row, index){
            return h(NSwitch, {
                size: 'small'
            }, {})
        }
	}

这里的h函数是Vue的渲染函数，它接受3个参数

• 第一个参数是组件也可是html标签
• 第二个参数就是组件（或者是标签）的属性
• 第三个参数是包含的内容

渲染效果如下

但是我想要在不同状态下显示不同的文字呢？像这样

那就要改变NSwitch组件包含的内容，
也就是在h函数的第三个参数里加点东西，加什么呢？
先看看naiveui开关组件的文档
就是把这俩属性加到第三个参数里面，如

	{
        title: "状态",
        key: "status",
        width: 100,
        render(row, index){
            return h(NSwitch, {
                size: 'small'
            }, {
                checked: '显示',
                unchecked: '隐藏'
            })
        }
    }

但是发现字体太大不好看怎么办？
那就在里面再套一个h函数来控制字体大小

    {
        title: "状态",
        key: "status",
        width: 100,
        render(row, index){
            return h(NSwitch, {
                size: 'small'
            }, {
                checked: h('span', {
                    style: {fontSize: '12px'}
                },{
                    default: () => '显示'
                }),
                unchecked: h('span', {
                    style: {fontSize: '12px'}
                },{
                    default: () => '隐藏'
                }),
                //顺便再加个好看的图标
                icon: () => '🤔'
            })
        }
    }

然后就可以达到图一的效果了