iview中table render渲染自己定义的模板

Question

table中render渲染自己定义的模板报错

import ToolTips from '../conversationList/components/tooltips'

[{
        title: '序号',
        key: 'conversationIndex',
        align: 'center'
      },{
        title: '用户名(nickname)',
        key: 'username',
        align: 'center',
        ellipsis: true
      },{
        title: '性别',
        key: 'gender',
        align: 'center'
      },{
        title: '所在国家',
        key: 'country',
        align: 'center'
      },{
        title: '最近一条消息预览',
        key: 'lastMsg',
        align: 'center',
        ellipsis: true,
        render: (h, params) => {
          return h('div', [
            h('Tooltip', {
              props: {
                placement: 'top',
                content: this.conversationData[params.index].lastMsg
              },
              style: {
                whiteSpace: 'normal'
              }
            }, [
              h('p', {
                attrs: {
                  class: 'hideText'
                }
              }, `${this.conversationData[params.index].lastMsg}`)
            ])
          ])
        }
      },{
        title: '最近一条消息时间',
        key: 'lastTime',
        align: 'center'
      },{
        title: '操作',
        key: 'action',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.editMark(params.index)
                }
              }
            }, '标记'),
            h('Button', {
              props: {
                type: 'success',
                size: 'small'
              },
              on: {
                click: () => {
                  this.openChat(params.index)
                }
              }
            }, 'Chat')
          ]);
        }
      },{
        title: '模板',
        key: 'muban',
        align: 'center',
        render: (h, params) => {
          return ('div', [
            h('tool-tips', {
              props: {
                lastMsg: '122222222'
              }
            })
          ])
        }
      }]

conversationData: [{
        conversationIndex: '1',
        username: 'admin',
        gender: '未知',
        country: 'China',
        lastMsg: 'Who are you?',
        lastTime: '11111111',
        isRead: 1
      }]

这是我写的模板

<template>
  <div class="tool-tips">
    <Tooltip placement="top">
      <p class="hideText">{{lastMsgText}}</p>
      <div slot="content" style="white-space: normal">{{lastMsgText}}</div>
    </Tooltip>
  </div>
</template>

<style>
  
</style>

<script>
export default {
  name: 'tool-tips',
  props: ["lastMsgText"]
}
</script>

渲染出来的结果是

报了个错误

是不支持自己定义的组件吗？
iview里面自带的Button组件可以正常的渲染，自己的不行，要怎么解决？

Answer 1

你在当前Vue实例里注册这个模板了吗？
类似于 Vue.component('tool-tips', Tooltips)

Answer 2

name: 'tool-tips',
import ToolTips from '../conversationList/components/tooltips'
抛出和接受的不一样吧
看提示是你没注册

Answer 3

在option 上加上对应的name属性

Answer 4

 推荐一个小组件 iview-xtable 用 element-ui 的方式写columns

Answer 5

我也遇到了这个问题，改成全局注册Vue.component('tool-tips', Tooltips)就不报错了