使用popover实现下拉框效果

产品要求实现下图效果，整体看着像下拉框，每项内容分左右两部分，这种效果也可以使用select控件实现（插槽），但产品要求用户单击右侧的”查看“项时弹出对话框，单击左侧的文本（如 上游供气情况）时无任何交互，这种要求使用select的插槽未能实现，所以使用了popover实现此需求。

一、先看下具体效果：

1、默认效果

2、popover获得焦点后，弹出内容区，单击“查看”文本弹出对话框

二、代码实现

<el-popover trigger="hover" placement="bottom-start" :visible-arrow="true">
    <ul>
        <li v-for="item in categoryArr" :key="item.label" style="clear: both; line-height: 230%;">
            <span style="float: left;">{{ item.label }}</span>
            <span style="float: right; cursor: pointer; color: #1ab394;padding-left: 80px;" @click="onClassificationClick(item.label, item.value)">查看</span>                            
        </li>
    </ul>
    <el-button slot="reference" size="small" class="shiftlog-category-content-btn">{{ categoryContentTitle }} <i class="el-icon-caret-bottom"></i></el-button>
</el-popover>

代码与效果图对应关系：