使用element表格中的过滤功能，排序功能，替换过滤图标，优化下拉框

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
    @sort-change="sortChange" @filter-change="filterOperateType">
        <el-table-column prop="serviceType" label="服务类型" min-width="100" column-key="serviceType"
             :filter-method="filterServiceType" :filter-multiple="false" :filters="[
                { text: '接口', value: '1' },
                { text: '订阅', value: '2' },
                { text: '抽取', value: '3' }]"
        >
            <template slot-scope="scope" slot="header">
                <span>{{ isServiceType(serviceType) ? isServiceType(serviceType) : '服务类型' }}</span>
                <span class="el-dropdown-link">
                <img src="../../../public/images/guolv.png" alt="" style="
                    width: 12px;
                    height: 12px;
                    margin-left: 4px;
                    cursor: pointer;
                    " />
                </span>
            </template>
            <template slot-scope="scope">
                {{scope.row.serviceType}}
            </template>

        </el-table-column>
        <el-table-column prop="submitter" label="服务名称" min-width="95">
        </el-table-column>
        <el-table-column prop="sxsj" label="生效时间" sortable="custom" min-width="105">
        </el-table-column>
</el-table>

  data() {
            return {
                serviceType: "",
                sortsxsj: "asc",//生效时间的正序倒序
                
            };
        },

        methods: {
         // 服务类型
            isServiceType(val) {
                let str;
                switch (val) {
                    case "1":
                        str = "接口";
                        break;
                    case "2":
                        str = "订阅";
                        break;
                    case "3":
                        str = "抽取";
                        break;

                }
                return str;
            },
            //过滤发生变化的时候触发的事件（可以针对多个过滤参数）
           filterOperateType(filters, row, column) {
                console.log(filters)
              
            },
            
            //排序选择时候触发的事件（可以针对多个排序）
            sortChange(column) {
                console.log(column)
                if (column.prop == 'sxsj') { //生效时间
                    this.sortsxsj = column.order == "ascending" ? "asc" : column.order == "descending" ? "desc" : null;
                    console.log(this.sortsxsj)
                } else if (column.prop == 'syl') { //上月使用量
                    this.sortsysyl = column.order == "ascending" ? "asc" : column.order == "descending" ? "desc" : null;
                    console.log(this.sortsxsj)
                } else if (column.prop == 'jfl') { //上月计费量
                    this.sortsyjfl = column.order == "ascending" ? "asc" : column.order == "descending" ? "desc" : null;
                    console.log(this.sortsxsj)
                }

                this.searchServiceList()

            },
        }