vue+element-ui table 单元格嵌套popover组件

需求：点击表格列为问题的单元格，弹出问题详情。展示为:

在element-ui表格组件中嵌套popover组件，会用到slot（插槽），将自定义的模板（el-popover）插入到表格的某一列中。

HTML代码如下：

                <el-table :data="tableData" border :cell-style="cellStyle">
            <el-table-column prop="fgsCode" label="机构"></el-table-column>
            <el-table-column :width="250" prop="content" label="问题">
                <template slot-scope="scope">
                    <!-- popover弹出框显示时可通过contentDetail()调接口获取questionForm数据 -->
                    <!-- 触发方式为click，将popover的箭头显示或隐藏通过设置visible-arrow实现 -->
                    <el-popover @show="contentDetail(scope.row.id)" trigger="click" visible-arrow="false">
                        <div slot="reference" >
                            <!-- 问题列显示文本 即触发Popover显示的HTML元素 -->
                            <p class="text">{{scope.row.content}}</p>
                        </div>
                        <!-- popover弹出框开始 -->
                        <div class="questionDetail">
                            <h4 class="questionList title">
                                <span class="left">问题:</span>
                                <span>{{scope.row.content}}</span>
                            </h4>
                            <!-- questionForm可以调接口获取，这里把数据写死了 -->
                            <!-- 循环遍历questionForm中的数据并显示在popover弹出框中 -->
                            <div :data="questionForm" v-for="(item,index) in questionForm" :key="index" class="questionList">
                                <div class="left"><span class="right">日期:</span>{{item.handleDate}}</div>
                                <div class="left">{{item.handlePeople}}:<span style="font-size:14px; color:#dcdfe6">回复</span></div>
                                <div class="left"><span class="right">内容:</span>{{item.content}}</div>
                                <div class="fgsPosition"><span class="right">机构:</span>{{item.fgsCode}}</div>
                            </div>
                            <!-- 回复表单 -->
                            <el-form :model="replyForm" ref="replyForm" style="padding:10px 0 0 10px;width:450px;">
                                <el-form-item required='required' prop="" label=" ">
                                   <el-input ref="reply" v-model="replyForm.reply" type="textarea" style="width:400px;"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <!-- 通过id标志是哪条数据实现回复功能 -->
                                   <el-button type="primary" @click="replyContent(scope.row.id,'replyForm')" style="margin-left:20px;">回 复</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!-- popover弹出框结束 -->
                    </el-popover>                   
                </template>
            </el-table-column>
            <el-table-column prop="status" :formatter="formatStatus" label="状态"></el-table-column>
            <el-table-column prop="handlePeople" label="处理人"></el-table-column>
            <el-table-column prop="handleDate" label="日期"></el-table-column>
        </el-table>

show为popover的事件，popover弹出框显示时触发contentDetail(scope.row.id)，id标识是哪条数据的问题详情。在popover中也用到了插槽，官方文档说明如下：

 JS代码如下：

<script>
export default {
    data() {
        return {
            //表格数据
            tableData: [
                {
                  fgsCode: "大连分公司",
                  content: "大连分公司获取数据不全的问题，请尽快查明原因。",
                  handlePeople: "李明",
                  handleDate: "2019-02-13",
                  status: "01"
                },
                {
                  fgsCode: "青海分公司",
                  content: "青海分公司内容",
                  handlePeople: "张晓",
                  handleDate: "2019-02-13",
                  status: "02"
                }
            ],
            //问题列表数据
            questionForm: [
              {
                id: 1,
                handlePeople: "张晓",
                handleDate: "2019-02-13",
                content: "反馈内容已解决",
                fgsCode: "总公司"
              },
              {
                id: 2,
                handlePeople: "李明",
                handleDate: "2019-02-13",
                content: "反馈内容已解决",
                fgsCode: "总公司"
              }
            ],
            replyForm:{reply: ""},
        }
    },
    created() {},
    methods: {
        // 回复按钮
        replyContent(id,formName) {
            //可以调接口，添加回复 
            ......
        },
        //显示问题详情列表 
        contentDetail(id,content) {
          //可以通过调接口获取questionForm数据
          ......  
        },
        //表格第二列文本颜色
        cellStyle({columnIndex}) {
            if(columnIndex==1) {
                return 'color:#409EFF;'
            }
        }
    }
</script>

STYLE代码：

<style>
    /* 全局样式 需要把style标签中的scoped="scoped"去掉 */
    .el-table {
        margin: 130px 100px 0 120px;
    }
    /* 全局样式 */
    .el-popover {
        left: 25%;
        width: 50%;
        height: 400px;
        overflow: auto;
    }
    .institutionName {
        margin-top: 10px;
        text-align: right;
    }
    .text {
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .questionDetail .questionList {
        padding: 10px;
        border-bottom: 1px dotted #dcdfe6;
    }
    .questionDetail span {
        display: inline-block;
    }
    .left {
        padding: 5px
    }
    .right {
        margin-right: 10px;
    }
    .fgsPosition {
        text-align: right;
    }
    .title {
        font-size: 16px;
        font-weight: normal;
    }
</style>