携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情
之前的，搜索框中如果条件过多，能够实现自动折叠，问题解决。解决方法，也很简单，关键是自己对 Element 中的一些标签的含义不理解，然后，在写的时候，位置放错了，其实只要包含关系写对，直接用前辈已经封装好的 searchBar，是可以使用成功的，既然之前对那些标签的意思不太懂，今天就记录一下......
el-row 和 el-col
之前没有认真看 Element 的官方文档，一直以为 <el-row> 和 <el-col> 是表格中的行和列，但真正仔细去官网查看，这两个其实是 Layout 布局控件中的组件，Layout 布局，官方概括就是通过基础的 24 分栏，迅速简便地创建布局。即，布局的一行(el-row)的宽度分为 24 等份，通过 span 属性来确定每一列(el-col)的宽度，占了 24 份中的几份。不论一个 el-row 中有多少个 el-col，其中 span 的总值必须等于 24。
分栏布局
比如将一行等分为两列，如下：
<template>
<div>
<el-row>
<el-col :span="12">第一列</el-col>
<el-col :span="12">第二列</el-col>
</el-row>
</div>
</template>
效果就是一行被这两列平均分开。
分栏间隔
如果想为不同分栏，也就是每个列，之间设置一定间隔，可以用 <el-row> 标签的 :gutter 属性，默认间隔为0，也就是挨在一起的。而且要注意，如下：
<el-row :gutter="24">
<el-col :span="8">第一列</el-col>
<el-col :span="8">第二列</el-col>
<el-col :span="8">第三列</el-col>
</el-row>
这样写，:gutter 是不会生效的，必须在分栏内，新增子元素，才可以实现分栏间隔。应该像下面这样写：
<el-row :gutter="24">
<el-col :span="8">
<div>第一列</div>
</el-col>
<el-col :span="8">
<div>第二列</div>
</el-col>
<el-col :span="8">
<div>第三列</div>
</el-col>
</el-row>
这样写，最后，每一列之间就会有 24 像素的间隔。
问题的解决
项目中，对应代码处，我一开始不太理解 <el-row> 和 <el-col> 之间的含义，然后在照着别的页面“抄”代码时还“抄”歪来，把 <el-col> 放在了 <el-row> 的外层，然后在 <el-col> 中利用 <v-for> 循环了从后台获取的对应表的查询条件都是哪些。然后，当我在 searchBar 中利用 $refs 去找 DOM 元素时，找失败了，因为它是通过 $refs.children[0].children[0].childNodes 去找每一列的，顺序一反，就找不到列集合了，searchBar 根本就没有利用起来，所以一直就是正常的显示全部；
对照了一下借鉴的页面之后，把 <el-row> 放在了 <el-col> 的外层，但是我又手欠把 <v-for> 给写在了 <el-row> 中，然后，页面中，就把所有搜索条件放在了第一列中。一开始，很懵，看着奇奇怪怪的页面，不知道怎么回事。然后就又去对比借鉴的页面，直接在他的页面上 F12，看了一下层级关系，发现他的 searchBar 里面，有很多的 <el-col>，而我的页面中，就一个 <el-col>，然后突然意识到是不是 <v-for> 放错了地方，改过来之后，完美解决。
只能说，“抄”代码都“抄”不好。为什么顺序会反呢？我不是复制过来的？不记得了，关键还是不懂标签的含义，不然也能一眼看出不对劲，这感觉，前端完全没入门啊......
希望本文能够帮到你，如有错误，望指正！
我向你敬礼啊，Salute！
