vue中el-popover的使用

最新推荐文章于 2025-10-15 14:29:29 发布

原创

最新推荐文章于 2025-10-15 14:29:29 发布 · 2.2w 阅读

7 ·

CC 4.0 BY-SA版权

这篇博客展示了如何在Vue.js中利用Element UI的Popover组件实现一个具有三级联动效果的功能。内容包括设置Popover的触发方式、内容以及与按钮的结合使用，同时也涉及到数据的获取和渲染。通过遍历数据并结合radio-group，用户可以查看和选择不同行业及职位。

1.trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

<template>
    <div class="listcontent">
      <el-row v-for="(item,index) in datalist" :key="index">
        <el-popover
          placement="right"
          trigger="hover"
        >
            <div class="popup" >
                <h3>{
  
  {item.industryName}}</h3>
                <el-row v-for="(zxSysIndustryChildren,cindex) in item.zxSysIndustryChildren" :key="cindex" style="width:600px;"> 
                    <el-col :span="6" style="color:#000000;font-size:13px">
                        {
  
  {zxSysIndustryChildren.occupationName}}
                    </el-col>
                    <el-col :span="18" style="border-bottom: 1px solid #F4F4F4;" >
                        <el-radio-group v-model="radio" v-for="(zxSysPo