天天看點

element-ui 常用元件技巧總結

好久不寫文章了,做個element-ui的總結,會持續更新

element-ui的table列超出部分省略加懸浮提示

<el-table-column :show-overflow-tooltip="true">
</el-table-column>           

複制

表單取消重置

this.$refs.companyInfoForm.resetFields()           

複制

input綁定回車事件

*一般監聽在輸入的input監聽keyup事件,加enter修飾符。如果input是元件,加上.native修飾符。

舉個栗子非元件

<input :placeholder="menu.placeholder"  @keyup.enter="search">           

複制

如果是元件就需要用

@keyup.enter.native="search"

<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');

其他一些事件

@keyup.13 回車

@keyup.enter 回車

@keyup.left 左鍵

@keyup.right 右鍵

@keyup.up 上鍵

@keyup.down 下鍵

@keyup.delete 删除鍵           

複制