el-select下拉菜单带icon图标

效果图：

<template>
<el-select v-model="rightPanelForm.workItem" placeholder="请选择" filterable style="width: 100%;" @change="workItemSelectChange">
    <template slot="prefix" v-if="workItemSelectIcon">
        <span style="font-size: 16px;">
            <i class="iconfont" :class="workItemSelectIcon"</i>
        </span>
   </template>
   <el-option v-for="item in rightPanelForm.workItemOptions" :key="item.value" :label="item.label" :value="item.value">
        <i class="iconfont" :class="item.icon"></i>
        <span class="c-margin-left5">{{ item.label }}</span>
   </el-option>
</el-select>
</template>
<script>
export default{
    data(){
        return {
            workItemSelectIcon: "",
            rightPanelForm: {
                workItemOptions: [
                    {
                        value: '选项1',
                        label: '阶段',
                        icon: 'icon-jieduan'
                    }, {
                        value: '选项2',
                        label: '里程碑',
                        icon: 'icon-jieduan'
                    }, {
                        value: '选项3',
                        label: '需求',
                        icon: 'icon-jieduan'
                    }, {
                        value: '选项4',
                        label: '项目',
                        icon: 'icon-jieduan'
                    }
                ]
            },
        }
    },
     methods: {
        workItemSelectChange(val) {
            this.rightPanelForm.workItemOptions.forEach(item => {
                if (item.value == val) {
                    this.workItemSelectIcon = item.icon;
                }
            })
        },
    }
}
</script>