从头到尾带你了解：Element Select 多分组多级下拉筛选封装

前端

2023-01-05 07:40:57

分组多级筛选：使用 Element Select 构建自定义组件

1. 需求分析

在现代 Web 开发中，分组多级筛选功能已成为一项常见需求，特别是在电子商务、产品展示和数据分析等场景中。然而，使用原生的 HTML select 元素实现此功能时，可能会面临繁琐的代码结构和维护成本。

2. 设计方案

为了解决这一痛点，我们提出了一种基于 Element Select 组件的封装方案。Element Select 是一款功能强大的 Vue UI 库，它提供了丰富的特性和高度可定制性。

3. 组件结构

我们的自定义组件包含以下主要部分：

主体部分： 包含下拉列表和筛选条件。
选项部分： 包含分组和选项。
数据部分： 包含数据源和筛选结果。

4. 交互方式

用户可以通过鼠标或键盘与组件进行交互，从而选择或筛选选项。

5. 代码实现

以下是组件的代码示例：

HTML：

<template>
  <div class="select-wrapper">
    <el-select v-model="value" multiple>
      <el-option-group v-for="group in groups" :key="group.label" :label="group.label">
        <el-option v-for="option in group.options" :key="option.value" :label="option.label" :value="option.value" />
      </el-option-group>
    </el-select>
  </div>
</template>

JS：

<script>
export default {
  props: {
    groups: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      value: []
    };
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value);
    }
  }
};
</script>

CSS：

<style>
.select-wrapper {
  width: 200px;
}
</style>

6. 使用组件

要使用自定义组件，只需将其导入 Vue 组件并传递分组数据即可。例如：

import GroupedSelect from './GroupedSelect.vue';

export default {
  components: {
    GroupedSelect
  },
  data() {
    return {
      groups: [
        {
          label: '水果',
          options: [
            {
              label: '苹果',
              value: 'apple'
            },
            {
              label: '香蕉',
              value: 'banana'
            }
          ]
        },
        {
          label: '蔬菜',
          options: [
            {
              label: '白菜',
              value: 'cabbage'
            },
            {
              label: '胡萝卜',
              value: 'carrot'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};