element-ui问题集锦

最新推荐文章于 2025-07-10 13:24:12 发布

Sunny2011111

最新推荐文章于 2025-07-10 13:24:12 发布

阅读量8.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html element-ui vue

本文链接：https://blog.youkuaiyun.com/Sunny2011111/article/details/78113312

前端专栏收录该内容

18 篇文章

订阅专栏

这篇博客总结了在使用Element-UI框架时遇到的一些问题及其解决方法，包括el-popover的手动触发与关闭，如何在表格中结合el-popover和el-input，以及解决el-table层级显示的问题，涉及HTML和JS的交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、el-popover的显示和隐藏

HTML部分，trigger设为”manual”

<el-popover ref="popoverUsername" placement="top" width="200" trigger="manual" content="请输入账号名称"></el-popover>
<el-input v-popover:popoverUsername v-model="loginForm.username" class="username"></el-input>

JS部分

this.$refs['popoverUsername'].doShow();
this.$refs['popoverPassword'].doClose();

2、在表格中使用el-popover和el-input

HTML部分，ref使用变量

<el-table-column prop="wares_id" label="商品ID" align="center">
                       <template scope="scope">
                            <el-popover :ref="'popover_id_' + scope.row.id" trigger="click" placement="top" width="255">
                                <div class="editTitle">编辑商品ID</div>
                                <hr>
                                <div class="editContent">
                                    <el-input v-model="scope.row.wares_id" class="edit" icon="circle-cross"
                                              :id="'wares_id_' + scope.row.id" :on-icon-click="clearInput"></el-input>
                                    <img src="/src/assets/sure.png" @click="modifyWares('wares_id', scope.row.id)"
                                         align="center">
                                    <img src="/src/assets/cancel.png" @click="cancelModifyWares('id', scope.row.id)"
                                         align="center">
                                </div>
                                <el-button slot="reference" class="tableData" type="text"
                                           @click="getInputValue('wares_id', scope.row.id, scope.row.wares_id)">
                                    {{scope.row.wares_id}}
                                </el-button>
                            </el-popover>
                        </template>
                    </el-table-column>

JS部分，用doClose()方法关闭el-popover

cancelModifyWares (str, id) {
    this.$refs['popover_' + str + '_' + id].doClose();
}

为el-input控件赋值，el-input是对input控件的封装，打印出el-input可以看到它就是一个div，里面放了一个input，所以为里面的input赋值即为为el-input赋值

getInputValue (field, id, value) {
    document.getElementById(field + '_' + id).getElementsByTagName("input")[0].value = value;
},

el-input控件里放一个清除icon，点击该icon，里面内容清空，可以将event打印出来，寻找其他方法

clearInput (event) {
    event.target.nextSibling.value = "";
},

3、el-table的层级问题

做项目时遇到个问题，点击某个按钮需要有弹窗，这个弹窗下有个半透明遮罩需要覆盖当前页面，但是偏偏el-table的下边框和右边框覆盖不了，为此百度了N久都不知道为什么，后来经高人指点，说给el-table加个z-index，于是我给弹窗、遮罩、el-table分别设了z-index，并且依次减小，问题解决了，非常感谢那位高人。本人思考了下，觉得可能是el-table这个大组件里嵌套了很多小组件，而这些小组件的z-index不一样。仅代表个人看法，如果不对，欢迎指出。