element-ui问题集锦

来源：互联网发布：手机上怎么开淘宝店编辑：程序博客网时间：2024/05/16 02:23

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 = "";},

阅读全文

0 0