使用render函数通过createVNode创建虚拟dom

以表格为例：在开发中可能需要对某一列进行特殊处理，可以使用render函数通过createVNode创建虚拟dom

直接看表格column配置，

说明：我这里使用的是arco-design组件库，不同组件库属性名可能不一样，自行修改即可，例如这里的dataIndex在element中应该是prop

// 表格列
export const getColumns = (actions: any) => {
  return [
    {
      width: 220,
      title: '名称',
      dataIndex: 'menuName',
      ellipsis: true,
      tooltip: true
    },
    {
      width: 80,
      title: '类型',
      dataIndex: 'menuType',
      render: ({ record }) => {
        const { menuType } = record
        const menuObj = {
          目录: { label: '目录', color: 'orange' },
          菜单: { label: '菜单', color: 'yellowgreen' }
        }[menuType]
        return createVNode('span', { style: { color: menuObj.color } }, menuObj.label)
      }
    },
    {
      width: 80,
      title: '图标',
      dataIndex: 'icon'
    },
    {
      title: '地址',
      dataIndex: 'path'
    },

    {
      width: 80,
      title: '操作',
      render: ({ record }) => {
        return createVNode(Opera, { record, ...actions }, '')
      }
      // slotName: 'opera'
    }
  ]
}