直接用 element-plus 的 select 组件嵌套实现多级联动，虽然方便，但效率堪忧。核心在于如何在数据层高效管理和更新数据，使用递归函数处理数据，并用 ref 管理选择状态。注意异步操作、数据一致性、错误处理和加载状态提示等细节，代码只是工具，重要的是设计能力和性能敏感度。
Vue3 和 Element-Plus 的多级联动：不止是代码，更是思考
很多朋友问我 Vue3 配合 Element-Plus 如何实现多级联动，这问题看似简单，实则暗藏玄机。 表面上看，无非是几个 Select 组件的组合，但真正优雅地解决这个问题，需要对数据结构、组件通信以及性能优化有深入的理解。 读完这篇文章，你不仅能写出代码，更能理解背后的设计思想，避免掉进常见的坑里。
先说结论：直接用 Element-Plus 的 Select 组件嵌套实现多级联动，虽然方便，但效率堪忧，尤其数据量大的时候。 为什么？因为每次选择上级都会触发下级组件重新渲染，这会造成性能瓶颈。
我们得换个思路。 核心在于如何高效地管理和更新数据。 与其让组件频繁渲染，不如在数据层做文章。 我建议使用一个递归函数来处理数据，并用 ref 来管理选择状态。
让我们来看代码，这可不是简单的复制粘贴：
立即学习“前端免费学习笔记（深入）”；
<code class="javascript"><template>
<div>
<el-select v-model="selectedLevel1" @change="handleLevel1Change">
<el-option v-for="item in level1Options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="selectedLevel2" @change="handleLevel2Change" v-if="selectedLevel1">
<el-option v-for="item in level2Options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="selectedLevel3" v-if="selectedLevel2">
<el-option v-for="item in level3Options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const level1Options = ref([
{ value: 'A', label: '选项A' },
{ value: 'B', label: '选项B' },
]);
const level2Options = ref([]);
const level3Options = ref([]);
const selectedLevel1 = ref('');
const selectedLevel2 = ref('');
const selectedLevel3 = ref('');
const handleLevel1Change = (val) => {
// 根据 val 获取 level2Options 数据，这部分逻辑根据你的数据源决定
// 例如：从后端获取，或从本地数据中筛选
fetchLevel2Data(val);
selectedLevel2.value = ''; // 清空下级选择
selectedLevel3.value = ''; // 清空下级选择
};
const handleLevel2Change = (val) => {
// 同理，获取 level3Options 数据
fetchLevel3Data(val);
selectedLevel3.value = ''; // 清空下级选择
};
const fetchLevel2Data = async (level1Value) => {
// 模拟异步获取数据
await new Promise(resolve => setTimeout(resolve, 500));
level2Options.value = level1Value === 'A' ? [{ value: 'A1', label: 'A1' }, { value: 'A2', label: 'A2' }] : [{ value: 'B1', label: 'B1' }];
};
const fetchLevel3Data = async (level2Value) => {
// 模拟异步获取数据
await new Promise(resolve => setTimeout(resolve, 500));
level3Options.value = level2Value === 'A1' ? [{ value: 'A11', label: 'A11' }] : [];
};
return {
level1Options,
level2Options,
level3Options,
selectedLevel1,
selectedLevel2,
selectedLevel3,
handleLevel1Change,
handleLevel2Change,
};
},
};
</script></code>这段代码的关键在于 fetchLevel2Data 和 fetchLevel3Data 函数，它们模拟了从服务器获取数据的过程。 实际应用中，你需要根据你的数据接口来修改这部分代码。 记住，异步操作很重要，避免阻塞主线程。
另外，注意 selectedLevel2 和 selectedLevel3 的清空操作，这能保证数据的一致性。 别小看这些细节，它们能避免很多诡异的 bug。
最后，别忘了考虑错误处理和加载状态的提示，让用户体验更好。 这篇文章只是抛砖引玉， 实际项目中，你可能需要更复杂的逻辑，例如缓存数据，优化数据结构等等。 记住，代码只是工具，更重要的是你的设计能力和对性能的敏感度。 祝你写出优雅高效的多级联动组件！
