<template>
  <div class="demo-popover-more-content">
    <ui-popover
      :trigger="{
        target: 'click',
        popper: 'hover',
      }"
      placement="right"
      width="400">
      <ui-button>点击查看内容</ui-button>
      <table slot="content">
        <thead>
          <th>时间</th>
          <th>地点</th>
          <th>事件</th>
        </thead>
        <tbody>
          <tr
            v-for="(row, index) of data"
            :key="index">
            <td>{{ row.when }}</td>
            <td>{{ row.where }}</td>
            <td>{{ row.what }}</td>
          </tr>
        </tbody>
      </table>
    </ui-popover>
  </div>
</template>

<script>
import { Popover, Button } from "amumu-ui"
export default {
  components: {
    "ui-popover": Popover,
    "ui-button": Button,
  },
  data() {
    return {
      data: [
        {
          when: "2018-05-04 10:35:19",
          where: "深圳市南山区高新园",
          what: "Do exciting thing.",
        },
        {
          when: "2018-05-04 10:35:19",
          where: "深圳市南山区高新园",
          what: "Do exciting thing.",
        },
        {
          when: "2018-05-04 10:35:19",
          where: "深圳市南山区高新园",
          what: "Do exciting thing.",
        },
      ],
    }
  },
}
</script>
