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

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

vue+element-ui table 单元格嵌套popover组件_第1张图片

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

HTML代码如下:

                
            
            
                
            
            
            
            
        

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

vue+element-ui table 单元格嵌套popover组件_第2张图片

 JS代码如下:

STYLE代码:

 

你可能感兴趣的:(前端)