鼠标移上，对应下拉框显示详细信息

首先给select下拉框增加两个方法

 

<div :class="['select-tip']" :style="{ top: tipTop }">
    <mtd-table :data="currentTip">
        <mtd-table-column prop="modelName" label="已加载模型" width="180"/>
        <mtd-table-column prop="modelNumber" label="版本" />
        <mtd-table-column prop="instanceCount" label="镜像" />
        <mtd-table-column prop="serverImage" label="实例数" width="230"/>
</div>

data() {
    return{
       showTip: false,
       currentTip: [], // 提示框内容
       currentOption: null, // 当前选项
       tipTop: "", // 提示框的 top 值 
    }
},

showTips(event, option) {
    // 计算提示框内容和位置
    const content = [option];
    const top = event.y - event.target.offsetHeight / 2;
    // 更新提示框的内容和位置
    this.showTip = true;
    this.currentOption = option;
    this.currentTip = content;
    this.tipTop = top + "px";
},
hideTip() {
    this.showTip = false;
},

.select-tip {
  opacity: 0.8;
  position: absolute;
  left: 48%;
  padding: 5px;
  color: #fff;
  transition: opacity 0.2s, top 0.2s;
}

.select-tip.show {
  opacity: 1;
}
/* 添加 hover 时的样式变化 */
.select-tip:hover {
  transition: opacity 0.5s, top 0.5s;
}

.select-tip.show::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #333;
  transform: translateY(-50%);
}