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

目录

实现思路

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

如何使用这个组件

结语


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

实现思路

一级联动

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

二级联动

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

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

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

  • 支持通过props传入数据,包括下拉选项的选项列表、占位符等。
  • 当选择项发生变化时,可以触发一个自定义的change事件,并且可以通过回调函数处理选择结果。
  • 可以支持筛选功能,使用户可以搜索选择项。
<template><el-selectv-model="value"filterable:placeholder="select.name || '请选择'"@change="change"><el-optionv-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组件有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/86766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

磁盘检测工具,根据lba查找对应文件

Q: 磁盘检测工具&#xff0c;如何根据损坏的lba查找对应的文件? 1.运行cmd&#xff0c;输入 fsutil fsinfo ntfsinfo e: 2.从上述结果中找到 "每扇区字节数&#xff08;Bytes Per Sector&#xff09;"、"每个簇字节数&#xff08;Bytes Per Cluster&#xff0…

Python中使用EMD(经验模态分解)

在Python中使用EMD&#xff08;经验模态分解&#xff09;进行信号分解时&#xff0c;通常可以设置信号分解的数目。EMD算法的目标是将信号分解成多个称为“本征模态函数”&#xff08;Intrinsic Mode Functions&#xff0c;简称IMF&#xff09;的成分&#xff0c;每个IMF都代表…

【设计模式】组合模式

文章目录 1.组合模式定义2.组合模式的结构2.1. 安全式组合模式的结构2.2.透明式组合模式的结构 3.组合模式实战案例3.1.场景说明3.2.关系类图3.3.代码实现 4.组合模式优缺点5.组合模式适用场景6.组合模式总结 主页传送门&#xff1a;&#x1f481; 传送 1.组合模式定义 组合模式…

服务注册发现_actuator微服务信息完善

SpringCloud体系里的&#xff0c;服务实体向eureka注册时&#xff0c;注册名默认是IP名:应用名:应用端口名。 问题&#xff1a; 自定义服务在Eureka上的实例名怎么弄呢 在服务提供者pom中配置Actuator依赖 <!-- actuator监控信息完善 --> <dependency><groupId…

2 C++中的引用

C中的引用 上节说到&#xff0c;变量名实际上是一段连续存储空间的别名。很显然我们可以将其命名为其它名字&#xff0c;就像我们有乳名、小名一样。 C引入了引用的概念。 引用可以看作一个已定义变量的别名引用的语法 type& name variate;普通引用在声明时必须用其它的…

springboot和vue:二、springboot特点介绍+热部署热更新

springboot特点介绍 能够使用内嵌的Tomcat、Jetty服务器&#xff0c;不需要部署war文件。提供定制化的启动器Starters&#xff0c;简化Maven配置&#xff0c;开箱即用。纯Java配置&#xff0c;没有代码生成&#xff0c;也不需要XML配置。提供了生产级的服务监控方案&#xff0…

如何在 SOLIDWORKS中创建零件模板 硕迪科技

作为一款多功能且可大量定制的 3D CAD 软件&#xff0c;SOLIDWORKS模板可以通过自定义属性包含大量数据。可以通过为SOLIDWORKS零件、装配体和工程图创建模板来利用这些模板。 与其他一些CAD软件不同&#xff0c;SOLIDWORKS不限制您可以创建的模板数量 - 您可以根据需要创建任…

在项目中,关于前端实现数据可视化的技术选择

前言 在项目中&#xff0c;数据可视化以图表、报表类型为主。 需求背景 技术框架是Vue2.x版本&#xff0c;组件库是Ant Design of Vue能够支撑足够多的图表类型开发图表大小/位置能够随意变动图表样式需要支持丰富多样的用户配置强大、开放的图表语法支持复杂的数据可视化场景…

UG NX二次开发(C++)-采用std::vector对体对象的质心进行排序

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、前言2、体对象质心结构体的构造3、采用NXOpen获取part中的所有体对象4、通过遍历体对象集合来实现std::vector<MyBody>的赋值5、对结构体排序6、调用的完整源代码7、生成dll并测试一、pan…

【深度学习实验】前馈神经网络(四):自定义逻辑回归模型:前向传播、反向传播算法

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 逻辑回归Logistic类 a. 构造函数__init__ b. __call__(self, x)方法 c. 前向传播forward d. 反向传播backward 2. 模型训练 3. 代码整合 一、实验介绍 实现逻…

如何实现设备可视化系统建设?

随着工业生产的复杂性和精细化程度不断提升&#xff0c;设备可视化已经成为现代工厂运营管理的重要工具之一。通过实时监控、数据分析和图像呈现等技术手段&#xff0c;设备可视化能够提供给管理者和操作人员更加直观、精确的信息&#xff0c;进而提高生产效率、降低运营成本、…

Linux 目录结构介绍

对上面的说明: root 目录 &#xff1a; linux 超级权限 root 的主目录 home 目录 &#xff1a; 系统默认的用户主目录&#xff0c;如果添加用户是不指定用户的主目录&#xff0c;默认在/home 下创建与用户同名的文件夹 bin 目录 &#xff1a; 存放系统所需要的重要命令&am…

uniapp Echart X轴Y轴文字被遮挡怎么办,或未能铺满整个容器

有时候布局太小&#xff0c;使用echarts&#xff0c;x轴y轴文字容易被遮挡&#xff0c;怎么解决这个问题呢&#xff0c;或者是未能铺满整个容器。 方法1&#xff1a; 直接设置 containLabel 字段 options: { grid: { containLabel: true, },} 方法2: 间接设置&#xff0c;但是…

vue3中withDefaults是什么

问: const props withDefaults(defineProps<{// 数据列表lotteryList: { pic: string; name?: string }[];// 中奖idwinId: number;// 抽奖初始转动速度initSpeed: number;// 抽奖最快转动速度fastSpeed: number;// 抽奖最慢转动速度slowSpeed: number;// 基本圈数baseCi…

VPP ARC和feature初始化

遍历feature_main主结构的next_arc单向链表&#xff0c;按照顺序为每个ARC注册结构分配索引&#xff08;feature_arc_index&#xff09;&#xff0c;如果注册ARC的时候为成员arc_index_ptr附了值&#xff0c;将ARC索引写入此值。 将arc_name作为key&#xff0c;areg注册结构为…

为什么添加了@EnableDiscoveryClient注解就可以实现服务注册

添加了nacos的maven依赖之后&#xff0c;只需要在启动类上加一个EnableDiscoveryClient注解就可以实现服务注册&#xff0c;这个注解为什么可以实现&#xff1f; EnableDiscoveryClient注解 进去到EnableDiscoveryClient注解之后&#xff0c;只有简单的几行代码&#xff1a; …

【新版】系统架构设计师 - 案例分析 - 信息安全

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 信息安全安全架构安全模型分类BLP模型Biba模型Chinese Wall模型 信息安全整体架构设计WPDRRC模型各模型安全防范功能 网络安全体系架构设计开放系统互联安全体系结构安全服务与安全机制…

mysql workbench常用操作

1、No database selected Select the default DB to be used by double-clicking its name in the SCHEMAS list in the sidebar 方法一&#xff1a;双击你要使用的库 方法二&#xff1a;USE 数据库名 2、复制表名&#xff0c;字段名 3、保存链接

简单趋势策略研究

交易对象&#xff1a;目前使用各种主力合约进行交易。 交易平台&#xff1a;易盛极星极星产品网 手续费研究:白糖期货手续费和保证金2023年09月更新 - 九期网 本人使用的期货交易公司&#xff1a;中信期货&#xff08;幸亏资金量大&#xff0c;返还高&#xff0c;不然就是给…

vue3+ts 实现移动端分页

current 开始页码 pageSize 结束页码 const sizeref<number>(10) //一页显示十条 const eachCurrentPageref<number>(1) //默认是第一页interface ITdata {current: number,pageSize: number,// xxxx 其他参数... } const selectApplyList ref<…