如图,实现表单的创建、输入和重置
直接上代码
1.(表单创建 .vue)
<el-form :inline="true" :model="filters" ref="filters">
<el-form-item prop="name">
<el-input v-model="filters.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item prop="sex">
<el-select v-model="filters.sex" placeholder="性别">
<el-option v-for="item in sex" :value="item.value" :label="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="age">
<el-input type="number" v-model="filters.age" min=0 placeholder="年龄"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="reset('filters')">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
2.表单初始化(.js)
data(){
return {
filters: {
name: '',
sex: '',
age: ''
},
sex: [
{value:'0',label:'女' },
{value:'1',label:'男'}
]
}
}
3.重置表单(.js)
methods:{
reset(form) {
this.$refs[form].resetFields()
}
}
!!!重点注意: