Vue轻松实现多条查询条件展开收起，get简洁美观搜索页面！

前端

2023-09-10 17:48:36

Vue 实现多条查询条件展开收起，打造美观高效搜索页面

在构建复杂搜索页面的过程中，管理大量查询条件往往令人头疼。繁杂的搜索选项会让页面变得混乱不堪，影响用户体验。借助 Vue 的强大功能，我们可以轻松实现多条查询条件的展开收起功能，让搜索页面既简洁美观又高效实用。

动态组件

使用 Vue 的动态组件，我们可以根据条件动态地渲染搜索项。我们可以定义一个变量来控制是否显示所有搜索项，然后根据这个变量的值渲染相应的组件。这使得我们能够在需要时展开全部搜索选项，而平时保持页面简洁。

展开收起模块

为了实现展开收起功能，我们可以将这个模块定义为一个单独的组件。这便于我们在页面中的其他位置复用这个组件。该组件负责控制搜索项的显示和隐藏，并根据显示状态调整样式。

样式控制

为了区分展开和收起状态，我们可以根据 showAll 变量对第一行最后一个列的样式进行控制。例如，当 showAll 为 true 时，我们显示展开状态的样式，如显示全部搜索项；而当 showAll 为 false 时，我们显示收起状态的样式，如仅显示部分搜索项。

示例代码

以下是一个实现多条查询条件展开收起功能的示例代码：

<template>
  <div>
    <button @click="showAll = !showAll">
      {{ showAll ? '收起搜索' : '展开搜索' }}
    </button>
    <div v-if="showAll">
      <!-- 搜索项组件 -->
      <search-item v-for="item in searchItems" :key="item.id" :item="item" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAll: false,
      searchItems: [
        { id: 1, label: '姓名', type: 'text' },
        { id: 2, label: '年龄', type: 'number' },
        { id: 3, label: '性别', type: 'select', options: ['男', '女'] },
        // 其他搜索项...
      ]
    };
  },
  methods: {
    toggleShowAll() {
      this.showAll = !this.showAll;
    }
  }
};
</script>

<template>
  <div>
    <label>{{ item.label }}</label>
    <input v-if="item.type === 'text'" type="text" :placeholder="item.placeholder">
    <input v-if="item.type === 'number'" type="number" :placeholder="item.placeholder">
    <select v-if="item.type === 'select'">
      <option v-for="option in item.options" :key="option">{{ option }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
};
</script>