目录
实现思路
创建通用的下拉选择框组件
如何使用这个组件
结语
当你使用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组件有所帮助!