鍍金池/ 問答/HTML5  HTML/ iview中table render渲染自己定義的模板

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

table中render渲染自己定義的模板報(bào)錯

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: '最近一條消息預(yù)覽',
        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: '最近一條消息時(shí)間',
        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)
                }
              }
            }, '標(biāo)記'),
            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>

渲染出來的結(jié)果是
圖片描述

報(bào)了個錯誤
圖片描述

是不支持自己定義的組件嗎?
iview里面自帶的Button組件可以正常的渲染,自己的不行,要怎么解決?

回答
編輯回答
我不懂

name: 'tool-tips',
import ToolTips from '../conversationList/components/tooltips'
拋出和接受的不一樣吧
看提示是你沒注冊

2017年11月29日 12:43
編輯回答
神經(jīng)質(zhì)

?推薦一個小組件 iview-xtableelement-ui 的方式寫columns

2018年6月19日 22:26
編輯回答
詆毀你

你在當(dāng)前Vue實(shí)例里注冊這個模板了嗎?
類似于 Vue.component('tool-tips', Tooltips)

2017年3月31日 19:11
編輯回答
久礙你

在option 上加上對應(yīng)的name屬性

2017年7月24日 12:20