el-table中嵌入el-popover

在el-table中嵌入el-popover可以为表格提供更多的交互性和信息展示。下面是一个简单的例子，展示如何在el-table中嵌入el-popover：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-popover
          placement="top"
          width="160"
          trigger="hover"
          v-model="scope.row.popoverVisible"
        >
          <p>这是 {{ scope.row.name }} 的详细信息</p>
          <p>年龄：{{ scope.row.age }}</p>
        </el-popover>
        <el-button
          size="mini"
          type="primary"
          @click="scope.row.popoverVisible = true"
        >
          详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, popoverVisible: false },
        { name: '李四', age: 22, popoverVisible: false },
        { name: '王五', age: 30, popoverVisible: false },
      ],
    };
  },
};
</script>

在这个例子中，我们使用了el-popover组件来展示每个人的详细信息。我们在el-table-column的作用域插槽中使用了el-popover和el-button组件。我们使用了v-model来绑定每个popover的可见性，这样每个popover都有自己的独特变量，避免了多个popover绑定同一个变量的问题。