element的form表单中如何一行显示多el-form-item标签
element的form表单中如何一行显示多el-form-item标签效果图:HTML代码:<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></scrip...
·
element的form表单中如何一行显示多el-form-item标签
效果图:
HTML代码:
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></script> <div id="app"> <el-form ref="form" :model="form" label-width="80px"> <el-row> <el-col :span="8"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="活动名称1"> <el-input v-model="form.name1"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="8"> <el-form-item label="活动名称2"> <el-input v-model="form.name2"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="活动区域2"> <el-select v-model="form.region2" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="活动名称3"> <el-input v-model="form.name3"></el-input> </el-form-item> </el-col> </el-row> </el-form> </div>
Babel + JSX + No-Library (pure JS)代码:
var Main = { data() { return { form: { name: '', region: '', name2: '', name3: '', region2: '', } } }, methods: { onSubmit() { console.log('submit!'); } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
更多推荐
已为社区贡献1条内容
所有评论(0)