element-ui

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>

• 1
• 2

JS部分

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

• 1
• 2

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

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

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

• 1
• 2
• 3

为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;
},

• 1
• 2
• 3

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

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

• 1
• 2
• 3

3、el-table的层级问题

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