vue 下拉框中悬浮显示详情，下拉框中添加按钮

如图所示，展开下拉框时，每条列表悬浮显示详情

<el-select v-model="value" placeholder="请选择" clearable @change="selectChange">
      <template #prefix v-if="value!=''">
        <el-popover
            placement="right"
            width="300"
            trigger="hover">
            <div>{{ detail }}</div>
            <el-button slot="reference" class="popoverBtn" size="mini" circle><i class="fa fa-fw fa-info"></i></el-button>
          </el-popover>
      </template>
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        >
          <span style="float: left">{{ item.name }}</span>
          <el-popover
            placement="right"
            width="300"
            trigger="hover">
            <div>{{ item.detail }}</div>
            <el-button slot="reference" class="popoverBtn" size="mini" circle><i class="fa fa-fw fa-info"></i></el-button>
          </el-popover>
          
      </el-option>
    </el-select>

export default {
    data() {
      return {
        options: [
          {
            id: '1',
            name: '成功率60%以上',
            detail:'成功率60%以上详情',
          }, 
          {
            id: '2',
            name: '成功率30%~60%',
            detail:'成功率30%~60%详情',
          }, 
          {
            id: '3',
            name: '成功率10%~30%',
            detail:'成功率10%~30%详情',
          },  
        ],
        value: '',
        detail:''
      }
    },
    methods: {
      selectChange(){
        console.log(this.value)
        this.options.map(item=>{
          if(this.value==item.id){
            this.detail=item.detail;
          }
        })
      },
    },
  }

::v-deep .el-input__prefix {
  height: 100%;
    right: 30px;
    left: auto;
    width: 24px;
    top: 7px;
}