element ui如何增加事件

在使用vue的element ui组件的时候,发现没有我们想要的事件

我们如何增加这个事件呢?

例如:

element ui中input组件增加事件

使用Element UI时,给一个输入框组件增加回车事件时,发现无法正确绑定。

一、问题

输入框增加个回车事件,代码如下:

<el-input v-model="searchContent" auto-complete="off" placeholder="Search..." @keyup.enter="onSearch"></el-input>
<el-input
                style="display: flex;"
                v-model="row.CREDIT"
                @keyup.enter="mcredit_show(row)"
                @blur="mcredit_show(row)"
                v-else
              ></el-input>

当我们在输入框增加个回车事件,发现实际没有绑定成功。

二、处理

如何才能绑定成功这个回车的事件呢?

此时我们需要增加.native,即可解决这个问题:

@keyup.enter.native="mcredit_show(row)"

才可以正常监听到对应的事件。

修改增加事件的代码如下:

<el-input
                style="display: flex;"
                v-model="row.CREDIT"
                @keyup.enter.native="mcredit_show(row)"
                @blur="mcredit_show(row)"
                v-else
              ></el-input>

而.native是用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件,而普通的js元素不需要。