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')
  • 相关阅读:
    我的javascript学习路线图
    Javascript 严格模式
    犀牛书学习笔记(10):模块和命名空间
    犀牛书学习笔记(9):继承
    犀牛书学习笔记(7):定义和使用类或对象
    犀牛书学习笔记(6):理解作用域和作用域链
    犀牛书学习笔记(5):javascript中的对象
    犀牛书学习笔记(4):面向对象(OOP)之回顾JAVA
    犀牛书学习笔记(3):函数
    bug
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/9273185.html
Copyright © 2011-2022 走看看