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')
  • 相关阅读:
    jsp int转String or String转int 方法
    log4j详细使用教程
    SQL 查询当天,本月,本周的记录
    1012Linux流编程的一些知识点
    myeclipse过期以后提示过期以后怎么办?!
    mysql常用命令
    Myeclipse文件没出错,但是项目上显示有错的解决办法
    java的一些命名规范吧
    mysql 按照时间查询
    struts1.x和struts2.x之间的一些区别
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/9273185.html
Copyright © 2011-2022 走看看