element-ui 方便快捷自定义表头(利用 :slot=“header“ slot-scope=“slot“) 摒弃jsx

效果如下

 关键代码:下图红框所圈

完整代码如下 

<el-table-column prop="meetingPositionName" label="会场" ></el-table-column>
<el-table-column >
   <!-- 自定义表头 -->
   <template slot="header" slot-scope="slot">
       <p  @click.stop="changeOrder()" style="cursor:pointer;display:inline-block;height:100%;">
          <span>确认状态</span>
          <span class="caret-wrapper">
              <i class="sort-caret ascending" :style="{'border-bottom-color':sortOrder == 'asc' ? '#409eff' : '#c0c4cc'}"></i>
              <i class="sort-caret descending" :style="{'border-top-color':sortOrder == 'desc' ? '#409eff' : '#c0c4cc'}"></i>
          </span>
       </p>
  </template>
  <!-- 自定义表内容 -->
  <template slot-scope="scope">
            <span v-if="scope.row.isConfirm == 0">未确认</span>
            <span v-else>已确认</span>
   </template>
</el-table-column>