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

0 0 javascript html5 vue.js iview
MRRobot
MRRobot

声望值:86 0人

2018-09-25 15:48:41 提问

关注 0关注

收藏 0收藏, 162浏览

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
      }]

这是我写的模板


{{lastMsgText}}

{{lastMsgText}}

渲染出来的结果是
图片描述

报了个错误
图片描述

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

请先 登录 后评论

4个回答

  • wolfing_85声望 2018-09-25 09:32

    name: 'tool-tips',import ToolTips from '../conversationList/components/tooltips'抛出和接受的不一样吧看提示是你没注册
    请先 登录 后评论
  • 永不言败-lzw104声望 2018-09-25 09:32

    在option 上加上对应的name属性
    请先 登录 后评论
  • ? 柠乐↘78声望 2018-09-25 09:32

    你在当前Vue实例里注册这个模板了吗?类似于 Vue.component('tool-tips', Tooltips)
    请先 登录 后评论
  • cooder-pig40声望 2018-09-25 09:32

    ?推荐一个小组件 iview-xtable 用 element-ui 的方式写columns
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问
XML 地图 | Sitemap 地图