在 SPA（单页应用）中，多级联动是常见的 UI 设计，例如城市选择、商品分类等。如何在前端中处理多级联动呢？本文将从数据结构、递归和组件化等角度给出详细的实现方案，并且会配以代码示例来进行讲解。
数据结构设计
在多级联动中，我们首先需要考虑的是数据结构。一般来说，多级联动的数据结构可以采用树形结构来表示，每个节点代表一个选项，所有节点的子节点组成了下一级联动的选项。
例如，我们有一个城市 - 区县的两级联动，可以用以下的 JSON 数据结构表示：
// www.javascriptcn.com code example
[
{
"name": "北京市",
"children": [
{
"name": "东城区"
},
{
"name": "西城区"
},
// 省略其他区县
]
},
{
"name": "上海市",
"children": [
{
"name": "黄浦区"
},
{
"name": "徐汇区"
},
// 省略其他区县
]
}
// 省略其他城市
]可以看到，每个城市都有一个 name 字段表示城市名称，以及一个 children 字段表示该城市下属的区县列表。如果有更多级联动，则可以依此类推。
递归实现
针对上述树形数据结构，我们可以选择递归的方式进行实现。首先，我们需要定义一个递归函数，用于遍历树形数据结构，并返回符合条件的选项，例如：
// www.javascriptcn.com code example
function findOptions(options, value) {
const result = [];
// 遍历当前级别的选项
for (const option of options) {
// 判断当前选项是否匹配
if (option.value === value) {
// 如果匹配，则直接返回当前选项的下级选项列表
result.push(...option.children);
break;
} else {
// 如果不匹配，则递归遍历下一级选项
result.push(...findOptions(option.children, value));
}
}
return result;
}在上面的代码中，我们遍历了当前级别的所有选项，如果有选项的值与传入的值相同，则说明该选项是我们需要的选项，我们将该选项的子选项依次加入到结果列表中；如果没有找到匹配的选项，则递归遍历下一级选项，直到找到匹配的选项为止。最后，我们将结果列表返回给调用者。
组件化实现
在递归实现的基础上，我们还可以进一步将多级联动封装为一个组件，方便在应用中复用。组件需要定义选择器、数据源、级联数量等属性，并提供动态绑定的接口。
以下是一个基于 Vue.js 的多级联动组件示例：
// www.javascriptcn.com code example
<template>
<div>
<select v-model="selected[level]" :disabled="disabled[level]" @change="handleChange">
<option value="">请选择{{ level + 1 }}</option>
<option v-for="option in options" :value="option.value">{{ option.label }}</option>
</select>
<cascade-selector
v-if="nextProps.length > 0"
:options="findOptions(nextProps[0])"
:selected="selected"
:disabled="disabled"
:level="level + 1"
:next-props="nextProps.slice(1)"
@change="handleNextChange"
></cascade-selector>
</div>
</template>
<script>
export default {
name: 'CascadeSelector',
props: {
options: { type: Array, required: true },
selected: { type: Array, required: true },
disabled: { type: Array, required: true },
level: { type: Number, required: true },
nextProps: { type: Array, default: [] }
},
methods: {
findOptions(value) {
return findOptions(this.options, value);
},
handleChange(event) {
this.selected.splice(this.level, this.selected.length - this.level, event.target.value);
this.disabled.splice(this.level + 1, this.disabled.length - this.level - 1, true);
this.$emit('change', event.target.value);
},
handleNextChange(value) {
this.$emit('change', value);
}
}
};
</script>上述代码中，我们通过递归的方式来展现多级联动的选项，如果当前级别选择了某个选项，则会传递给下一级联动组件，从而触发下一级别的选项的渲染。同时，为了保证多级联动的正确性，我们使用了 selected 和 disabled 两个数组来记录当前选择的选项和下一级联动组件的禁用状态。
指导意义
多级联动是前端开发中的常见需求，往往需要根据不同的业务场景进行不同的实现方案。本文中，我们讨论了基于递归和组件化两种实现多级联动的方案，并且提供了针对城市 - 区县两级联动的示例代码。在实际开发中，我们可以根据实际情况来选择不同的实现方式，并综合考虑复用性、性能、维护等方面的因素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d77db7a941bf7134d6cd04