el-table表头、内容自定义

<el-table-column prop="task_performance">
    <!-- 自定义标题 -->
    <template slot="header">
        <span>作业综合成绩</span>
        <el-tooltip popper-class="tooltip" placement="top">
        <i class="el-icon-warning-outline" style="margin-left:2px;"></i>
        <div slot="content" class="tooltip-content">
            <div>时间范围内已考分数/应考次数</div>
        </div>
        </el-tooltip>
    </template>
    <!-- 自定义内容 -->
    <template  slot-scope="{ row }">
        <el-popover ref="popover3" placement="bottom" width="360" trigger="hover" popper-class="dialog-contant" v-if="row.task_list && row.task_list.length > 0">
        <div>
            <p v-for="(item,index) in row.task_list" :key="index" class="myflex2">
            <span>{{ item.name }} <br/>{{ item.end_time | parseTime("{y}-{m}-{d} {h}:{i}:{s}")  }}</span>
            <span>{{ item.score }} 分</span>
            </p>
        </div>
        <span slot="reference">{{ row.task_performance }}</span>
        </el-popover>
    </template>
</el-table-column>

样式

// el-popover 悬浮框重置
.el-popover.dialog-contant{
   height: 200px;
   background: #FFFFFF;
   box-shadow: 0px 0px 20px 0px rgba(17, 88, 185, 0.3);
   border-radius: 4px;
   border-style: solid;
   border-color: #2A7CEC;
   border-width: 0px 0px 0px 6px;
   color: #000;
   padding: 10px;
   p{
     margin: 0;
     height: 30px;
     line-height:30px ;
     span{
        margin-right: 10px;
     }
   }
 }