下拉框组件的封装（element ui ）

TOC

当你使用Vue.js构建Web应用时，封装可复用组件是提高开发效率和代码可维护性的关键之一。在这篇文章中，我们将探讨如何使用Vue.js来创建一个通用的下拉选择框组件，以及如何将它封装成一个可配置的组件。

实现思路

一级联动

先从饿了么拿下拉列表
数据处理
提示名处理
设定默认值（直接设定result即可），用computed来做

二级联动

增加子项，子项数据默认为空数组
付项增加children数据
父项加一个函数，用来取到children设置给子项
处理父项默认数据，子项也跟着默认数据

创建通用的下拉选择框组件

首先，让我们创建一个通用的下拉选择框组件。这个组件将使用ElementUI的 <el-select> 和 <el-option> 来实现。它具有以下特点：

支持通过 props 传入数据，包括下拉选项的选项列表、占位符等。
当选择项发生变化时，可以触发一个自定义的 change 事件，并且可以通过回调函数处理选择结果。
可以支持筛选功能，使用户可以搜索选择项。

cobol 复制代码

<template>
  <el-select
    v-model="value"
    filterable
    :placeholder="select.name || '请选择'"
    @change="change"
  >
    <el-option
      v-for="item in select.data"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  props: {
    select: Object,
  },
  data() {
    return {};
  },
  computed: {
    value: {
      get() {
        this.select.result && this.change(this.select.result);
        return this.select.result;
      },
      set() {},
    },
  },
  methods: {
    change(val) {
      this.select.result = val;
      console.log(this.select.result);
      this.select.change && this.select.change(this.buildChildren(val));
    },
    buildChildren(val) {
      let data = this.select.data.find((item) => {
        return item.value == val;
      });
      return data.children;
    },
  },
};
</script>

如何使用这个组件

现在，让我们看看如何在Vue.js应用中使用这个通用的下拉选择框组件。首先，你需要导入这个组件并注册它，然后可以在模板中使用它。

cobol 复制代码

<template>
  <div class="table-page">
    <Select :select="select"></Select>
    <Select :select="selectChild"></Select>
  </div>
</template>
<script>
import Select from "./componentsdemo/SelectMain.vue";
export default {
  name: "Index",
  components: {
    Select,
  },
 
  data() {
    return {
      selectChild: {
        result: "",
        name: "食物子项",
        data: [],
      },
      select: {
        result: "选项2",
        name: "食物",
        change: (data) => {
          console.log(data);
          this.selectChild.result = "";
          this.selectChild.data = data;
        },
 
        data: [
          {
            value: "选项1",
            label: "黄金糕",
            children: [
              {
                value: "选项1-1",
                label: "黄金糕1-1",
              },
              {
                value: "选项1-2",
                label: "黄金糕1-2",
              },
            ],
          },
          {
            value: "选项2",
            label: "双皮奶",
            children: [
              {
                value: "选项2-1",
                label: "双皮奶2-1",
              },
              {
                value: "选项2-2",
                label: "双皮奶2-2",
              },
            ],
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      console.log(this.select);
    },
  },
};
</script>

在上述示例中，我们首先导入了通用下拉选择框组件，然后在模板中使用它，并将需要的数据传递给它。当选择项发生变化时，我们可以通过 @change 事件来处理选择结果。

结语

通过封装通用组件，我们可以在Vue.js应用中轻松地实现重复使用的功能，提高开发效率并减少重复工作。通用下拉选择框组件是一个很好的例子，它可以根据不同的需求进行配置，使其适用于多种情况。希望本文对你理解如何创建和使用Vue.js组件有所帮助！