[已解决] element-ui的table中嵌入Tooltip和Popover, Popover无法显示问题

最近遇到这样的需求. 在element-ui的table中嵌入"Tooltip 文字提示"和"Popover 弹出框". 简单如下:

看到设计图, 心情愉快地就到element-ui去CV代码. 跑起来发现根本不是那么一回事. 为什么我的Popover不能显示??? 一头雾水, 赶紧百度一下.

网上众说纷纭, 但是最后我还是找到了适合我自己的解决方案. 该方案参考这篇文章. 感谢!

我的全部代码如下:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- 注意点1: 使用 tooltip 将 popover 包裹住, 如果是 popover 包裹 tooltip 会导致显示问题  -->
        <!-- tooltip-->
        <el-tooltip
          class="item"
          effect="dark"
          content="Top Center 提示文字"
          placement="top"
        >
          <!-- popover -->
          <!-- 注意点2: 使用ref来命中指定的作用域 -->
          <el-popover width="160" :ref="`popover-${scope.$index}`">
            <p>确定删除该项吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                type="text"
                size="mini"
                @click="handleClose(scope.$index)"
              >
                取消
              </el-button>
              <el-button type="danger" size="mini">确定</el-button>
            </div>
            <!-- popover 触发源 -->
            <el-button type="text" slot="reference">删除</el-button>
          </el-popover>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
     
  data () {
     
    return {
     
      tableData: [
        {
     
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
     
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
     
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
     
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      visible: false
    }
  },
  methods: {
     
    handleClose (index) {
     
      console.log(index)
      this.$refs[`popover-${
       index}`].doClose()
    }
  }
}
</script>

<style lang="less">
.box {
     
  width: 100px;
  .top {
     
    text-align: center;
  }

  .left {
     
    float: left;
    width: 60px;
  }

  .right {
     
    float: right;
    width: 60px;
  }

  .bottom {
     
    clear: both;
    text-align: center;
  }

  .item {
     
    margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
     
    padding: 8px 10px;
  }
}
</style>