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();<spanclass="hljs-comment">//清空校验</span><spanclass="hljs-keyword">this</span>.$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>