需求: 在一个table列表里面,其中有一列如果有数据就可以点击,点击就出现Poptip, 展示数组里面的key:value
效果图是这样的:
代码:
<template>
<div>
<Table border ref='selection' :columns='columns' max-height='500' :data='data'></Table>
</div>
</template
<script>
export default {
data () {
return {
amountList: [
{key: '换卡费', value: '30元'},
{key: '挂失费', value: '20元'},
{key: '手续费', value: '130元'},
{key: '补卡费', value: '33元'}
],
data: [],
columns: [
{ type: 'selection', width: '60', align: 'center'},
{ title: '项目名称', key: 'name' }
{ title: '历史累积(元)',
key: 'cardNumber',
render: (h, params) => {
if (params.row.name == '历史杂费(3100)') { // 判断只有name是这个值才可点击
return h('Poptip', {
props: {
trigger: 'click',
placement: 'bottom-start',
transfer: true,
theme: 'dark'
}
}, [
h('span', {}, params.row.cardNumber) // 当前行展示的数据
h('div', {slot: 'content'}, // Poptip里面的数据
this.amountList.map(el => {
return h('div', {}, el.key + ':' + el.value)
})
)
])
}
}
}
],
{ title: '时间', key: 'time' },
}
}
}
</script>