element组件实现自定义悬浮提示框

要实现这样的功能：

<el-row v-for="(item, index) in tableData.tableView" :key="index" class="tbody-col">
              <el-col :span="2">{
   
   { index + 1 +  '层' }}</el-col>
              <el-col
                :span="2"
                v-for="(content, index2) in item"
                :key="index2"
                :style="{ background: content.status === 'not' ? '#1be751' : content.status === 'yes' ? '#1b88e7' : content.status === 'other' ? '#efa648' : '#fff' }"
                @mouseover.native="handleMouseOver"
                >
                <!-- {
    
    { content.room }} -->
                <el-popover
                  placement="top-start"
                  title="标题"
                  width="200"
                  trigger="hover"
                  :content="content.room+'房间'">
                  <span slot="reference">{
   
   { content.room }}</span>
                </el-popover>
                </el-col>
            </el-row>

核心代码就这：

如果想要弹出框内部嵌入其他组件，比如表格啊或者其他html结构，可以这样去掉el-popover的content属性，换成下面这样：

效果：

用到了element的popover组件，参考传送门