Vue ElementUI级联选择器如何正确回显选中项？

本文共计657个文字，预计阅读时间需要3分钟。

目录

1.分析问题

2.解决问题

1. 分析问题 [问题描述] 使用ElementUI的Cascader级联选择器组件，如果使用了懒加载和动态加载数据，会导致在v-model中的数据重新发布到Cascader级联组件。

目录

• 1. 分析问题
• 2. 解决问题

1. 分析问题

使用 ElementUI 的 Cascader 级联选择器组件，如果使用了懒加载和动态加载数据会导致，在v-model中的数据据重新放到 Cascader 级联组建后，会出现数据不回显的问题。 在级联组件中虽然在v-model中重新传入选中的数据，但采用了懒加载+远程数据的方式构建选项数据，此时级联组件的结构数据并未生成，此时仅有选中后的数据而没有选项数据，因此导致了级联选择器没有数据可供显示，也就导致了数据不回显的问题。 ① 前端渲染完整的选项数据，此方案需要前端渲染的数据量极大，可能导致页面崩溃，不建议采用此方式处理； ② 仅渲染选中后的数据，即仅构建选中后的选项结构，后端返回的数据结构进行处理后依然可以配合懒加载+远程数据的方式（需要对渲染生成的数据进行去重，避免和远程访问的数据重复）

2. 解决问题

借助Cascader 级联选择器组件的options属性，构建选项结构配合v-model即可实现数据回显，如果想配合懒加载+远程数据，需要指定级联组件的属性信息。