iView-UI：表格中使用Poptip，Poptip中再嵌套表格

问题

最近遇到一个需求，需要对表格里的一个统计项展示它的统计细节，于是想到用Poptip包含需要展示的细节，这些细节再用一个表格去展示。于是乎就给自己挖了这么绕口的一个坑。

解决方案

<template>
  <div>
    <i-table :columns="columns0" :data="rowData" border></i-table>
  </div>
</template>

<style scoped>
  .expand-row{
    margin-bottom: 16px;
  }
</style>

<script>
export default {
  data () {
    return {
      columns0: [
        {
          title: '总和',
          align: 'center',
          render: (h, params) => {
            return h('Poptip', {
              props: {
                trigger: "hover",
                placement: 'bottom',
                transfer: true
              }
            }, [
              h('span', {}, this.rowData[params.index].sum),
              h('i-table', {
                slot: 'content',
                props: {
                  columns: [
                    {
                      title: '因子1',
                      align: 'center',
                      key: 'column1'
                    },
                      {
                        title: '因子2',
                        align: 'center',
                        key: 'column2'
                      },
                    {
                      title: '因子3',
                      align: 'center',
                      key: 'column3'
                    },
                    {
                      title: '因子4',
                      align: 'center',
                      key: 'column4'
                    },
                  ],
                  data: [this.rowData[params.index]],
                  width: 500,
                  border: true
                }
              })
            ])
          }
        }
      ],

      rowData: []
    }
  },
  mounted () {
    this.rowData = [
      {
        column1: 1,
        column2: 2,
        column3: 3,
        column4: 4,
        sum: 10
      },
      {
        column1: 5,
        column2: 6,
        column3: 7,
        column4: 8,
        sum: 26
      }
    ]
  }
}
</script>