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>包起来就可以了。

相关推荐
李剑一6 分钟前
vitepress中logo打包丢失
vue.js
融化的雪13 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
Gazer_S25 分钟前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
鹏多多25 分钟前
前端IndexedDB数据库高效管理插件localForage的教程+案例
前端·javascript·vue.js
艾小码2 小时前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..2 小时前
ES6是什么
前端·javascript·es6
Jammingpro4 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
quweiie11 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
闲蛋小超人笑嘻嘻11 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
巴博尔12 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app