點擊el-table表頭中的某一列 觸發不同的事件 給表頭添加圖標

<template>
    <el-table  :data="productList" @header-click="headerChange">
        <el-table-column prop="title" label="標題" header-align="center" align="left" min-width="15%" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="subject" label="產品" header-align="center" align="left" min-width="15%" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="level" label="等級A" align="center" :render-header="renderLevel" min-width="20%">
        </el-table-column>
        <el-table-column prop="timeOnlyStr" label="時間A" align="center" :render-header="renderTime" min-width="15%">
        </el-table-column>
	</el-table>
</template>

<script>
    export default {
        methods: {
            renderLevel(creatElement, { column, $index }) { //重新定義表頭等級A列的名字並添加圖標
                return (
                    <span class='el-dropdown-link' style="color:#ffffff"> 等級 <i class='el-icon-sort el-icon--right'></i></span>
                )
            }, 
            renderTime(creatElement, { column, $index }) {//重新定義表頭時間A列的名字並添加圖標
                return (
                    <span class='el-dropdown-link' style="color:#ffffff"> 時間 <i class='el-icon-sort el-icon--right'></i></span>
                    )
                },
            headerChange(column, event){
                //判斷點擊的是等級列還是時間列
                if(column.property=='level'){
                    this.timeChange();
                }else if(column.property=='timeOnlyStr'){
                    this.levelChange();
                }else{
                }
            },
            timeChange(){
                //處理點擊時間列的業務邏輯
            },
            levelChange(){
                //處理點擊等級列的業務邏輯
            },
        }
    }
</script>
<style>
</style>