zoukankan      html  css  js  c++  java
  • 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')
  • 相关阅读:
    解决“ 故障模块名称: clr.dll ”
    关于阿里云专有网络搭建FTP服务器的深坑
    电脑异常断电,IDEA崩溃
    Winform 出现“Win已停止工作”解决方法
    C# WinForm控件、自定义控件整理(大全)
    cmd获取管理员权限等
    检测笔记本电池状态
    单片机
    常用工具、焊接技术
    元器件
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/9273185.html
Copyright © 2011-2022 走看看