vue3 使用 渲染函数,传递具名插槽

702 阅读1分钟

在vue3中,当想使用h函数向组件传递子元素时

我们需要传递一个插槽函数或者是一个包含插槽函数的对象而非是数组

具体的代码如下

          render: (h, params) => {
            return h('div', [
              h(resolveComponent('Tooltip'), {
                placement: 'top',
                transfer: true,
                theme: 'light',
              }, {
                default: () => h('span', {
                  style: {
                    display: 'inline-block',
                    width: params.column._width - 36 + 'px',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }
                }, params.row.flowDesc),
                content: () => h('span', {
                  style: { whiteSpace: 'normal', wordBreak: 'break-all' }
                }, params.row.flowDesc)
              })
            ]);
          }

更多说明可以见官网

image.png

官网render函数使用地址