vue element ui select选择器+popover弹出框联合使用

碳酸水123

已于 2022-10-26 11:34:37 修改

阅读量1k

点赞数

文章标签： vue.js elementui 前端

于 2022-07-27 11:24:35 首次发布

本文链接：https://blog.csdn.net/weixin_43937851/article/details/126010838

版权

使用效果：

在这里插入图片描述

实现代码：

<el-form-item label="仪器名称" prop="apparatusName">
        <el-select  v-model="queryParams.apparatusName" placeholder="请选择仪器名称" clearable>
          <el-option
            v-for="item in apparatusListName"
            :key="item.id"
            :label="item.apparatusName"
            :value="item.apparatusName">
            <!--弹出框展示仪器基本信息-->
            <el-popover
              placement="right"
              width="300"
              trigger="hover">
              <span>仪器设备型号：{{ item.apparatusModel }}</span><br/>
              <span>出厂编号：{{ item.id }}</span><br/>
              <span>使用部门：{{ item.userDepartment }}</span><br/>
              <span>责任人：{{ item.responsiblePer}}</span>
              <el-button slot="reference" type="text" style="width:100%;color:black;">
                <span style="float: left">{{ item.apparatusName }}</span>
              </el-button>
            </el-popover>
          </el-option>
        </el-select>
      </el-form-item>