el-form表格搜索展开折叠组件

已于 2023-09-16 14:10:33 修改
阅读量1.2k 收藏 5
点赞数 2
分类专栏： Vue 文章标签： vue.js javascript
于 2022-11-14 17:01:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848495/article/details/127850762
版权

在这里插入图片描述
在这里插入图片描述

<template>
  <el-row v-bind="rowProps" type="flex">
    <slot />
    <template v-if="advanced">
      <slot name="advanced" />
    </template>
    <el-col v-bind="actionColOpt">
      <el-form-item class="search-action" label-width="0">
        <el-button v-if="hasAdvanced" type="text" @click="toggleAdvanced">
          {{ advanced ? "收起" : "展开" }}
          <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
        </el-button>
        <slot name="advanceBefore" />
        <el-button
          plain
          size="small"
          type="primary"
          :loading="searchLoading"
          @click="handleSearch"
        >查询</el-button>
        <el-button plain size="small" @click="handleReset">重置</el-button>
        <slot name="advanceAfter" />
      </el-form-item>
    </el-col>
  </el-row>
</template>
<script setup>
import { computed, useSlots } from 'vue';
import { useBoolean } from '@/hooks';

defineProps({
  rowProps: {
    type: Object,
    default: () => {
      return {
        gutter: 20
      };
    }
  },
  searchLoading: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['reset', 'search']);

const { bool: advanced, toggle: toggleAdvanced } = useBoolean();

const actionColOpt = computed(() => {
  const { default: defalutSlot, advanced: advancedSlot } = useSlots();
  const defaultCol = defalutSlot().reduce(
    (acc, cur) => (acc += cur.componentOptions.propsData.span),
    0
  );
  const advancedCol =
    advanced.value &&
    advancedSlot().reduce((acc, cur) => (acc += cur.componentOptions ? cur.componentOptions.propsData.span : 0), 0);
  /** 满行后余多少份 */
  const redunCol = (defaultCol + (advanced.value ? advancedCol : 0)) % 24;
  /** 没有多余的就占满一行，否则就算出还剩余几份 */
  const actionSpan = redunCol === 0 ? 24 : 24 - redunCol;
  const actionColOpt = {
    span: actionSpan
  };
  return actionColOpt;
});

const hasAdvanced = computed(() => {
  const { advanced: advancedSlot } = useSlots();
  return Boolean(advancedSlot() && advancedSlot().length > 0);
});

function handleReset() {
  emit('reset');
}
function handleSearch() {
  emit('search');
}
</script>
<style lang="scss" scoped>
.el-row {
  flex-wrap: wrap;
}
.el-form {
  width: 100%;
}
:deep(.el-input) {
  width: 100%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-date-editor) {
  width: 100%;
}
:deep(.el-autocomplete) {
  width: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background: #d5dce5;
}
.search-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>

// 用法

<template>
  <main>
    <el-form label-position="right" label-width="100px">
      <SearchForm>
        <el-col :span="6">
          <el-form-item label="活动名称">
            <el-input v-model="formLabelAlign.name" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动名称">
            <el-input v-model="formLabelAlign.name" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动名称">
            <el-input v-model="formLabelAlign.name" style="width: 100%" />
          </el-form-item>
        </el-col>
        <template #advanced>
          <el-col :span="6">
            <el-form-item label="活动名称">
              <el-input v-model="formLabelAlign.name" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动名称">
              <el-input v-model="formLabelAlign.name" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="活动名称">
              <el-input v-model="formLabelAlign.name" style="width: 100%" />
            </el-form-item>
          </el-col>
        </template>
      </SearchForm>
    </el-form>
  </main>
</template>
<script>
export default {
  components: {
    SearchForm: () => import('@/components/TheWelcome.vue')
  },
  data() {
    return {
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      }
    };
  }
};
</script>

改良版

<template>
  <el-row v-bind="rowProps" type="flex">
    <!-- <slot /> -->
    <template v-for="(item, index) in $slots.default">
      <render-col v-if="advanced ? true : index < showCount" :key="index" :vnodes="item" />
    </template>
    <template v-if="advanced">
      <slot name="advanced" />
    </template>
    <el-col v-bind="actionColOpt">
      <el-form-item class="search-action" label-width="0">
        <el-button v-if="hasAdvanced" type="text" @click="toggleAdvanced">
          {{ advanced ? "收起" : "展开" }}
          <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
        </el-button>
        <slot name="advanceBefore" />
        <el-button
          plain
          size="small"
          type="primary"
          :loading="searchLoading"
          @click="handleSearch"
        >查询</el-button>
        <el-button plain size="small" @click="handleReset">重置</el-button>
        <slot name="advanceAfter" />
      </el-form-item>
    </el-col>
  </el-row>
</template>
<script setup>
import { computed, useSlots } from 'vue';
import { useBoolean } from '@/hooks';

const props = defineProps({
  rowProps: {
    type: Object,
    default: () => {
      return {
        gutter: 20
      };
    }
  },
  searchLoading: {
    type: Boolean,
    required: true
  },
  alwaysLine: {
    type: Number,
    default: 1
  }
});

const emit = defineEmits(['reset', 'search']);

/** 渲染vnode对象组件 */
const RenderCol = {
  functional: true,
  render: (h, ctx) => ctx.props.vnodes
};

const slots = useSlots();
const defalutSlot = slots.default();
const advancedSlot = slots.advanced();

const { bool: advanced, toggle: toggleAdvanced } = useBoolean();
/** 最大能显示的份数 */
const maxCol = 24 * props.alwaysLine;
/** 常显的个数 */
const showCount = computed(() => {
  let total = 0;
  for (const index in defalutSlot) {
    total += defalutSlot[index].componentOptions.propsData.span;
    if (total > maxCol) {
      return index - 1;
    }
  }
  return defalutSlot.length;
});

const hasAdvanced = computed(() => {
  if (showCount.value < defalutSlot.length) return true;
  return Boolean(advancedSlot && advancedSlot.length > 0);
});

const actionColOpt = computed(() => {
  let defaultCol = 0;
  const length = advanced.value ? defalutSlot.length : showCount.value;
  for (let i = 0; i < length; i++) {
    defaultCol += defalutSlot[i].componentOptions.propsData.span;
  }
  const advancedCol =
    advanced.value && advancedSlot?.length > 0 &&
    advancedSlot.reduce((acc, cur) => (acc += cur.componentOptions ? cur.componentOptions.propsData.span : 0), 0);
  /** 满行后余多少份 */
  const redunCol = (defaultCol + (advanced.value ? advancedCol : 0)) % 24;
  /** 没有多余的就占满一行，否则就算出还剩余几份 */
  const actionSpan = redunCol === 0 ? 24 : 24 - redunCol;
  const actionColOpt = {
    span: actionSpan
  };
  return actionColOpt;
});

function handleReset() {
  emit('reset');
}
function handleSearch() {
  emit('search');
}
</script>
<style lang="scss" scoped>
.el-row {
  flex-wrap: wrap;
}
.el-form {
  width: 100%;
}
:deep(.el-input) {
  width: 100%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-date-editor) {
  width: 100%;
}
:deep(.el-autocomplete) {
  width: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background: #d5dce5;
}
.search-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
![在这里插入图片描述](https://img-blog.csdnimg.cn/4e80289aef4841eb8a0d467d192510d9.png#pic_center)

全新UI版本
在这里插入图片描述
在这里插入图片描述

<template>
  <div class="search-advanced">
    <el-collapse v-model="name" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <div class="search-advanced-top">
            <div class="top-left">
              <svg-icon :icon-class="name === '1' ? 'icon-down' : 'icon-right'" />
              <span>筛选</span>
            </div>
            <!-- 点击事件需加.stop -->
            <slot name="search-action" />
          </div>
        </template>
        <div class="search-advanced-content">
          <el-row v-bind="rowProps" type="flex">
            <slot />
            <el-col v-bind="actionColOpt">
              <el-form-item class="search-action" label-width="0">
                <slot name="advanceBefore" />
                <el-button
                  plain
                  size="small"
                  type="primary"
                  :loading="searchLoading"
                  @click="handleSearch"
                >查询</el-button
                >
                <el-button plain size="small" @click="handleReset">重置</el-button>
                <slot name="advanceAfter" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, computed, useSlots } from 'vue';
import { useWindowSize } from '@vueuse/core';

defineProps({
  rowProps: {
    type: Object,
    default: () => {
      return {
        gutter: 0
      };
    }
  },
  searchLoading: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['reset', 'search']);

const name = ref('1');
const slots = useSlots();
const defalutSlot = slots.default();
const { width } = useWindowSize();

const actionColOpt = computed(() => {
  const points = getBreakpoints(width.value);
  let defaultCol = 0;
  const length = defalutSlot.length;
  for (let i = 0; i < length; i++) {
    const propsData = defalutSlot[i].componentOptions.propsData;
    defaultCol += propsData[points] ? propsData[points] : propsData['span'];
  }
  /** 满行后余多少份 */
  const redunCol = defaultCol % 24;
  /** 没有多余的就占满一行，否则就算出还剩余几份 */
  const actionSpan = redunCol === 0 ? 24 : 24 - redunCol;
  const actionColOpt = {
    span: actionSpan
  };
  return actionColOpt;
});
/**
 * 获取响应式栅格对应断点（和el-col保持一致）
 * @param {number} width
 */
function getBreakpoints(width) {
  let breakPoint = 'span';
  switch (!!width) {
    case width < 768:
      breakPoint = 'xs';
      break;
    case width >= 768 && width < 992:
      breakPoint = 'sm';
      break;
    case width >= 992 && width < 1200:
      breakPoint = 'md';
      break;
    case width >= 1200 && width < 1920:
      breakPoint = 'lg';
      break;
    case width >= 1920:
      breakPoint = 'xl';
      break;
  }
  return breakPoint;
}

function handleReset() {
  emit('reset');
}
function handleSearch() {
  emit('search');
}
</script>
<style lang="scss" scoped>
.search-advanced {
  margin: 0 0 24px 0;
  background: #ffffff;
  .search-advanced-top {
    width: 100%;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f4f4f4;
    padding: 0 20px 0 8px;
    .top-left {
      display: flex;
      align-items: center;
      cursor: pointer;
      :deep(.svg-icon) {
        width: 20px;
        height: 20px;
      }
      span {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        margin-left: 6px;
      }
    }
  }
  .search-advanced-content {
    padding: 24px 20px 0 0;
  }
  :deep(.el-collapse) {
    border: none;
    .el-collapse-item__wrap {
      border: none;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
    .el-collapse-item__header {
      height: auto;
      border: none;
      line-height: 0;
    }
    .el-collapse-item__arrow {
      display: none;
    }
  }
  :deep(.el-form-item__label) {
    padding: 0 8px 0 0;
    font-size: 13px;
  }

  .el-row {
    flex-wrap: wrap;
  }
  .el-form {
    width: 100%;
  }
  :deep(.el-input) {
    width: 100%;
  }
  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-date-editor) {
    width: 100%;
  }
  :deep(.el-autocomplete) {
    width: 100%;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    background: #d5dce5;
  }
  .search-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
小燕呀
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一个基于ASP.NET+AJAX实现的表单Form元素collapsible 折叠显示控件源码
01-07
一个基于ASP.NET+AJAX实现的表单Form元素collapsible 折叠显示控件源码。
响应式表单组件布局
qq_41068362的博客
03-11 1448
响应式表单组件布局，表单一行能放下多少就多少，会响应式的控制
Elementui 折叠导航(展开收起变成icon图标)如何实现
cjj123580的博客
06-29 750
【代码】Elementui 折叠导航(展开收起变成icon图标)如何实现。
vue使用elementui的el-menu的折叠菜单collapse
最新发布
weixin_49931650的博客
12-02 1610
由于我的是在el-menu所在组件外面的兄弟组件设置是否折叠的控制，我用事件总线bus进行是否折叠传递。就是如此，有疑问评论区见。
基于el-form实现自动展开/收起的查询条件组件
宁静致远
11-30 3177
基于el-from 实现 查询条件 的自动 展开与收起 SearchFilter
Element-ui自定义组件：可折叠按钮列表
zhengvipin的博客
03-12 2856
基于Element-ui二次开发，自适应屏幕大小，可折叠的按钮列表。
搜索功能(el-form): 展开/收起
m0_58293192的博客
12-21 1913
搜索功能(el-form): 展开/收起
vue vxe-table vxe-form 表格，折叠表单，表格校验，动态生成表单，表单配置
大猩猩X
02-08 1万+
查看官网示例：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/fullEdit <vxe-form :data="formData4" title-align="right" title-width="100" @submit="searchEvent" @reset="resetEvent"> <vxe...
vue之点击“展开/收回”功能实现（两种情况）
m0_64054560的博客
02-16 5761
vue实现展开收回功能，两种情况简单应对，列表展开显示全部、部分数据展开收回，菜鸟版基础教程
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
el-table，el-form在vue中封装组件化，含操作按钮和插槽
el-form-renderer:data数据驱动的动态复杂表格解决方案
04-28
形式呈现器目录灵感贡献贡献者执照 介绍 什么el-form-renderer基于element-ui ，但不限于element-ui组件。 在完全继承element-ui的form属性的基础上，进行了扩展。 一些非形式的组件或自定义组件（例如图片上传和RTF...
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
二次封装el-form组件
06-08
常用的列表页头部的表单查询
Vue2.0+ElementUI实现查询条件展开和收起功能组件
weixin_44274094的博客
02-14 3222
代码是原博主的原封未动，想要记下来，下次使用方便找。
element折叠面板(默认展开)的使用及样式修改
学习记录
11-19 1万+
效果图： HTML部分： <el-collapse v-model="activeNames" style="border:none;margin-left:30px;"> <el-collapse-item name="1"> <template slot="title"> <p class="title">运行信息</p> </template&
vue +elementUl实现展开和收起功能
热门推荐
吴小花的博客
11-24 1万+
需求： 由于后台搜索选项有很多，影响页面美观，所以一进来要隐藏一部分搜索项，只保留1行，点击【展开搜索】按钮的时候才显示全部，点击【收起搜索】按钮又收起部分，保留1行。 需求分析： 由于不太好控制行数，因为不同屏幕尺寸展示的1行的内容并不相同（不考虑移动端），所以考虑用显示高度来控制。 解决思路： 所以这里通过控制搜索区域的高度来实现展开和收起搜索功能。 页面一进来是收起搜索状态，控制搜索区域的高度为120px,超出部分隐藏。 点击展开搜索的时候，调整搜索区域的高度为”auto" 定....
Vue+ElementUI实现查询条件展开和收起功能
hikktn的博客
01-10 1万+
首先，我想实现ant design vue中的展开和收起，效果如下： 看了几篇博客的实现思路，但都不太满意，我想要按钮那一行不要换行，直接显示在最后一列，具体效果如下： 实现过程与难点 第一点，就是思路的问题，我先看看display:none会给这几个输入框带来的影响是什么？有没有其他问题，经过测试，想到直接把按钮那一栏全部改成一个局部组件。 我们在使用他时，只需要在多列的最后添加这个子组件。 然后，就是判断它是否隐藏和显示。 好了，主要思路讲解到这里，我们直接上代码。 <!DOCTYPE ht
el-form-item放两个组件并列显示
04-04
如果您想要在el-form-item中放置两个组件并列显示，您可以使用el-row和el-col组件将它们放在一行中。您可以像这样使用它们： ``` <el-form-item label="Label"> <el-row> <el-col :span="12"> <el-input placeholder="Input 1"></el-input> </el-col> <el-col :span="12"> <el-input placeholder="Input 2"></el-input> </el-col> </el-row> </el-form-item> ``` 在这个例子中，我们在el-form-item中使用了一个el-row，然后在el-row中使用了两个el-col组件。每个el-col组件的span属性都设置为12，这样它们就会平均分配el-row的宽度。在每个el-col组件中，我们放置了一个el-input组件，这些组件将并排显示在同一行中。 您可以根据需要调整el-col组件的span属性和el-row组件的其他属性，以满足您的具体需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值