element中El-form-item嵌套popover显示问题

最新推荐文章于 2024-01-31 20:36:58 发布

前端忍者（Frontend Ninja）

最新推荐文章于 2024-01-31 20:36:58 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_43869192/article/details/128937220

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

// 这种情况下，popover的内容不会正常划过显示出来，因为左右布局的el-form-item的label有float:left样式，影响到了它的展示
// 解决方案：1去掉el-form-item的浮动；2 form上添加label-position="top"属性，其实也是去掉浮动
<el-form :model="config" :rules="rules" size="mini">
    <el-form-item label="test"  prop="test">
        <span class="label" slot="label">
          test
          <el-popover
            placement="bottom-start"
            title="命名规则"
            content="1"
            effect="dark"
            trigger="hover">
              <i class="iconfont" slot="reference"></i>
          </el-popover>
        </span>
        <el-input/>
    </el-form-item>
</el-form>