el-row el-col显示失效问题修复

el-row el-col显示失效

问题:

在列表显示页面,头部有几个搜索框和选择框,由于搜索条件框太多,写了el-row 和el-col进行分行分列展示。测试发现并没有按照行列展示。

html 复制代码
    <el-form :inline="true" :model="paramForm" class="filter-form-inline filter-form" @keyup.enter.native="getDataList()">

  <el-row>
      <el-col :span="8">
      <el-form-item label="省代码">
        <el-input v-model="paramForm.provinceCode" placeholder="省代码" clearable></el-input>
      </el-form-item>
</el-col>

        <el-col :span="8">
      <el-form-item label="市代码">
        <el-input v-model="paramForm.cityCode" placeholder="市代码" clearable></el-input>
      </el-form-item>
</el-col>

        <el-col :span="8">
      <el-form-item label="区县代码">
        <el-input v-model="paramForm.countyCode" placeholder="区县代码" clearable></el-input>
      </el-form-item>
      </el-col>
  </el-row>
<!-- 示例复制 -->
 <el-row>
      <el-col :span="8">
      <el-form-item label="省代码">
        <el-input v-model="paramForm.provinceCode" placeholder="省代码" clearable></el-input>
      </el-form-item>
</el-col>

        <el-col :span="8">
      <el-form-item label="市代码">
        <el-input v-model="paramForm.cityCode" placeholder="市代码" clearable></el-input>
      </el-form-item>
</el-col>

        <el-col :span="8">
      <el-form-item label="区县代码">
        <el-input v-model="paramForm.countyCode" placeholder="区县代码" clearable></el-input>
      </el-form-item>
      </el-col>
  </el-row>
<!-- 示例复制 -->
 <el-row>
      <el-col :span="8">
      <el-form-item label="省代码">
        <el-input v-model="paramForm.provinceCode" placeholder="省代码" clearable></el-input>
      </el-form-item>
</el-col>

        <el-col :span="8">
      <el-form-item label="市代码">
        <el-input v-model="paramForm.cityCode" placeholder="市代码" clearable></el-input>
      </el-form-item>
</el-col>

        <el-col :span="8">
      <el-form-item label="区县代码">
        <el-input v-model="paramForm.countyCode" placeholder="区县代码" clearable></el-input>
      </el-form-item>
      </el-col>
  </el-row>

  </el-form>

解决:

将el-row的部分用<div>包起来就可以了。

相关推荐
CsharpDev-奶豆哥18 分钟前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai4 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书4 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码4 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
嘗_4 小时前
手写自己的小型react
前端·javascript·react.js
zuo-yiran4 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837754 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10244 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
光影少年4 小时前
React Native 第三章
javascript·react native·react.js
一川_4 小时前
虚拟滚动的幽灵:从搜索失准到丝滑体验的救赎之旅
javascript