在项目中会经常遇到用户必填项时,如果用户没有填写,那么我们会自动将光标移动到第一个必填项的位置。
<el-input v-model="username" ref="usernameRef"></el-input>
<!-- 在输入框中增加ref属性 -->
this.$refs.usernameRef.focus();
usernameRef
为输入框中的ref
属性。
- 完整代码
<template>
<div>
<el-form :model="ruleForm" ref="ruleForm" label-width="100px">
<el-form-item label="用户名" prop="pass">
<el-input v-model="ruleForm.username" ref="usernameRef"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {},
};
},
components: {},
methods: {
submitForm() {
// 将光标定位到 ref = usernameRef 的输入框上
this.$refs.usernameRef.focus();
},
},
};
</script>
<style scoped>
</style>