ElementUI組件庫常見方法及問題匯總（持續更新）

本文主要介紹在使用ElementUI組件庫的時候，常遇見的問題及使用到的方法，匯總記錄便於查找。

1、表單

阻止表單的默認提交

<!-- @submit.native.prevent -->
<el-form  @submit.native.prevent></el-form>

輸入框enter提交請求

<!-- @keyup.enter.native -->
<el-input @keyup.enter.native="query()"></el-input>

表單重置

<el-form  @ref="demoForm"></el-form>

<script>
    // 重置
    this.$refs.demoForm.resetFields();
    // 清空校驗
    this.$refs.demoForm.clearValidate();
</script> 

2、表格

表格長字段省略顯示

<!-- :show-overflow-tooltip="true" -->
<el-table-column prop="name" label="名稱" :show-overflow-tooltip="true"></el-table-column>

序號翻頁遞增

<!-- :index -->
<el-table-column type="index" label="序號" :index="(index)=>{return (page - 1) * size + index + 1}"></el-table-column>

3、組件

dialog彈窗關閉按鈕失效

<el-dialog :visible.sync="showDialog" @close="showDialog = false"></el-dialog>

dialog彈窗保留滾動條

<el-dialog :lock-scroll="false"></el-dialog>

this.$confirm("確定移除該任務類型嗎？", "", { lockScroll: false }).then(()=>{})

select 打開彈窗觸發事件

使用visible-change事件，當參數是true表示打開，當參數是false表示關閉

<el-select @visible-change="openUser($event)"></el-select>