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>

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