element-plus/docs/examples/form/inline-form.vue
云游君 efb48a61fd
fix(style): adjust component size & demo (#4801)
* fix(style): adjust button size & demo spacing

* fix(style): adjust input padding & with prefix/suffix

* fix(style): adjust button padding horizontal

* fix(style): adjust form margin & font-size

* refactor(docs): use setup simplify form examples
2021-12-15 16:36:49 +08:00

30 lines
819 B
Vue

<template>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="Approved by">
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const formInline = reactive({
user: '',
region: '',
})
const onSubmit = () => {
console.log('submit!')
}
</script>