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

Z时代
2024-01-10
分类：技术分享

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">{{lastMsgText}}</div>
</Tooltip>
</div>
</template>
<style>
</style>
<script>
export default {
name: 'tool-tips',
props: ["lastMsgText"]
}</script>