目录
当你使用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组件有所帮助！
