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

相关推荐
浪裡遊14 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理26 分钟前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef062 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端3 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder4 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句4 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom4 小时前
JavaScript reduce()函数详解
javascript
小飞悟4 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子4 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手5 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript