ElementUI组件库常见方法及问题汇总

2018-09-27

文章导航

本文主要介绍在使用ElementUI组件库的时候，常遇见的问题及使用到的方法，汇总记录便于查找。

1、表单

阻止表单的默认提交

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

输入框enter提交请求

1 2	<!-- @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、表格

表格长字段省略显示

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

序号翻页递增

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

3、组件

dialog弹窗关闭按钮失效

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

dialog弹窗保留滚动条

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

1	this.$confirm("确定移除该任务类型吗？", "", { lockScroll: false }).then(()=>{})