下拉框组件的封装(element ui )

目录

实现思路

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

如何使用这个组件

结语


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

实现思路

一级联动

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

二级联动

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

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

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

  • 支持通过props传入数据,包括下拉选项的选项列表、占位符等。

  • 当选择项发生变化时,可以触发一个自定义的change事件,并且可以通过回调函数处理选择结果。

  • 可以支持筛选功能,使用户可以搜索选择项。

    <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应用中使用这个通用的下拉选择框组件。首先,你需要导入这个组件并注册它,然后可以在模板中使用它。

复制代码
<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组件有所帮助!

相关推荐
UI设计和前端开发从业者2 天前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
共享ui设计和前端开发人才2 天前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui
ui设计前端开发老司机2 天前
UI前端大数据处理性能瓶颈突破:分布式计算框架的应用
ui
前端开发与ui设计的老司机2 天前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
UI设计和前端开发从业者3 天前
从UI设计到数字孪生实战应用:构建智慧金融的智能风控平台
ui·金融
ui设计前端开发老司机3 天前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
X_StarX3 天前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
Clair-Sean3 天前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux
Zevalin爱灰灰4 天前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
前端开发与ui设计的老司机4 天前
数字孪生技术引领UI前端设计潮流:增强现实(AR)的集成应用
ui