element-ui 常用组件技巧总结

2021-07-08 10:08:49 浏览数 (3)

好久不写文章了,做个element-ui的总结,会持续更新 element-ui的table列超出部分省略加悬浮提示

代码语言:javascript复制
<el-table-column :show-overflow-tooltip="true">
</el-table-column>

表单取消重置

代码语言:javascript复制
this.$refs.companyInfoForm.resetFields()

input绑定回车事件 *一般监听在输入的input监听keyup事件,加enter修饰符。如果input是组件,加上.native修饰符。 举个栗子非组件

代码语言:javascript复制
<input :placeholder="menu.placeholder"  @keyup.enter="search">

如果是组件就需要用@keyup.enter.native="search"

代码语言:javascript复制
<el-input :placeholder="menu.placeholder" @keyup.enter.native="search" v-model.trim="$store.state.vehicle.inputText" />

只针对form表单中的摸一个键值对进行校验,多用于双重校验的时候 举个栗子,当表单里面的Name值不仅需要改变的时候做校验,在离开blur事件时也需要做校验,那么在这种情况下就需要用到单独字段校验和from中validate来实现双重校验 this.$refs['dataForm'].validateField('phone');

其他一些事件

代码语言:javascript复制
@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

1 人点赞