Vue 并排放置两个div的写法

最新推荐文章于 2023-08-01 16:46:06 发布

原创最新推荐文章于 2023-08-01 16:46:06 发布 · 8.2k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何在Vue项目中使用Element UI的布局(Layout)和表单(Form)组件，通过具体代码示例展示了如何创建响应式网格布局及表单元素，包括下拉选择框(Select)和输入框(Input)，并结合实际场景进行样式调整和功能实现。

Vue的开发文档: (Layout布局模块)

https://element.eleme.cn/#/zh-CN/component/select

样例: 使用<el-col :span="6"></el-col>

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

实际使用:

        <div>
          <el-form :model="formItem" ref="formItem">
            <el-row>
              <el-col :span="6">
            <el-form-item label="请选择数据源 : ">
              <el-select  style="overflow:auto;border-right:1px solid #ccc;background-color: #ffffff;border-radius: 4px;height: 40px;width: 100px" v-model="formItem.stateList">
                <el-option v-for="item in stateList" :key="item.value" :value="item.value">{{
                  item.label }}
                </el-option>
              </el-select>
            </el-form-item>
              </el-col>
                <el-col :span="6">
            <el-form-item label="查询的表名: " label-width="100px">
              <el-input style="width: 220px"
                placeholder=""
                v-model="input"
                :disabled="true">
              </el-input>
            </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>