ElementUI 插槽（v-slot）应用：列表中检索条件过多，导致界面不够简洁美观，进行动态展示隐藏，检索条件。

ElementUI 插槽（v-slot）应用：列表中检索条件过多，导致界面不够简洁美观，进行动态展示/隐藏，检索条件。

话不多说上代码：

index.vue

<template>
  <div class="fold-container">
    <!-- 表单 -->
    <div :class="{'filter-query':true,'folding':foldOrUnfold.query}">
      <!--  检索条件    -->
      <slot name="querys" />
      <!--折叠/展开操作按钮-->
      <el-tooltip v-if="querys" :content="foldOrUnfold.query ? '折叠':'展开'" placement="bottom" effect="light">
        <i v-if="foldOrUnfold.query" class="icon-diy" @click="handleQuerys">
          <svg t="1716292425412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="16" height="16"><path d="M300.95 512l268.651-360.113-90.225-67.275-318.825 427.387 318.825 427.387 90.225-67.275z" p-id="2614" fill="#cdcdcd" /><path d="M793.25 62v900h-112.501v-900h112.501z" p-id="2615" fill="#cdcdcd" /></svg>
        </i>
        <i v-else class="icon-diy" @click="handleQuerys">
          <svg t="1716292159085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2028" width="16" height="16"><path d="M752.128 512l-305.665 409.728 102.656 76.544 362.752-486.272-362.752-486.272-102.656 76.544z" p-id="2029" fill="#cdcdcd" /><path d="M192 1024v-1024h128v1024h-128z" p-id="2030" fill="#cdcdcd" /></svg>
        </i>
      </el-tooltip>
    </div>
    <!-- 按钮 -->
    <div :class="{'filter-button':true,'folding':foldOrUnfold.button}">
      <!--  公共按钮    -->
      <slot name="buttons" />
      <!--折叠/展开操作按钮-->
      <el-tooltip v-if="buttons" :content="foldOrUnfold.button ? '折叠':'展开'" placement="bottom" effect="light">
        <i v-if="foldOrUnfold.button" class="icon-diy" @click="handleButtons">
          <svg t="1716292425412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="16" height="16"><path d="M300.95 512l268.651-360.113-90.225-67.275-318.825 427.387 318.825 427.387 90.225-67.275z" p-id="2614" fill="#cdcdcd" /><path d="M793.25 62v900h-112.501v-900h112.501z" p-id="2615" fill="#cdcdcd" /></svg>
        </i>
        <i v-else class="icon-diy" @click="handleButtons">
          <svg t="1716292159085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2028" width="16" height="16"><path d="M752.128 512l-305.665 409.728 102.656 76.544 362.752-486.272-362.752-486.272-102.656 76.544z" p-id="2029" fill="#cdcdcd" /><path d="M192 1024v-1024h128v1024h-128z" p-id="2030" fill="#cdcdcd" /></svg>
        </i>
      </el-tooltip>
    </div>
  </div>

</template>
<script>
import FormFolding from './index'
export default FormFolding
</script>
<style lang="scss" src="./index.scss" />

index.js

export default {
  name: 'FilterFormFolding',
  directives: { },
  props: {
    querys: {
      type: Boolean,
      default: true
    },
    buttons: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 折叠&展开
      foldOrUnfold: {
        query: false,
        button: false
      }
    }
  },
  created() {

  },
  methods: {
    handleQuerys() {
      this.foldOrUnfold.query = !this.foldOrUnfold.query
    },

    handleButtons() {
      this.foldOrUnfold.button = !this.foldOrUnfold.button
    }
  }
}

index.scss

.fold-container{
    display: inline-table;
  .filter-query,.filter-button{
    display: inline;
    float: revert;
    .icon-diy{
      box-sizing: border-box;
      padding: 4px;
      margin-right: 6px;
      &:hover , &:active{
        cursor: pointer;
      }
    }
    .unfolding{
      display:none;
    }
    &.folding{
      .unfolding{
        display:inline-grid;
      }
    }
  }
}

以标签使用，将其设为全局控件，便以调用：

main.js

// >> 列表检索条件折叠展开
import FilterFormFolding from '@/components/FilterFormFolding/index.vue'
Vue.component('filter-form-folding', FilterFormFolding)

示例：

<!--搜索条件和新增按钮-->
  <filter-form-folding>
      <template v-slot:querys>
 		<el-input
              v-model.trim="name"
              placeholder="名称"
              clearable
            />
 		<el-select v-model="type" placeholder="类别" class="unfolding" clearable>
              <el-option v-for="item in datas" :key="item.keyer" :label="item.name" :												value="item.keyer" />
         </el-select>
	</template>
    <template v-slot:buttons>
		<el-button> 重置</el-button>
         <el-button> 查询</el-button>
         <el-button> 新增</el-button>
	</template>
 </filter-form-folding>
<el-table>
    .
    .
    .
</el-table>

界面效果：