vue2 render列表里面用Poptip,并且循环出数据

需求: 在一个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>