element-ui下拉出现多选树状图

element-ui是一套基于Vue.js的UI组件库，提供了丰富的组件和工具，方便开发者进行项目开发。其中，下拉多选树状图是element-ui中的一个常用组件之一。

使用element-ui的下拉多选树状图组件，可以实现用户通过下拉选择框来选择多个选项，并且这些选项还以树状图的形式展示。这在处理包含层级关系的数据时尤其有用。

首先，在Vue组件中引入element-ui的下拉多选树状图组件，即el-select组件。然后，在组件中定义一个变量来存储用户选中的值，例如selectedOptions。接着，在挂载到DOM之前设置el-select组件的placeholder属性，如：请选择。

接下来，通过调用element-ui提供的API，将需要展示的选项作为树节点传递给el-select组件。可以使用element-ui的el-tree组件来支持树状结构，通过配置tree-props属性来指定树节点的显示字段，例如label和children。在数据源中，可以为每个节点设置一个唯一的key属性。

然后，在el-select组件的v-model属性中绑定selectedOptions变量，以实现选中值的双向绑定。此时，用户可以通过下拉选框选择多个选项，选中的选项会自动存储在selectedOptions变量中。

最后，在Vue组件的template中使用el-select组件来展示下拉多选树状图。设置el-select的filterable属性为true，可以让用户通过输入关键字来筛选选项。使用el-option组件来表示每一个下拉选项。为el-select组件设置多选属性multiple，并通过el-tree组件的子节点slot来显示树状结构。

通过以上步骤，我们就可以使用element-ui快速实现下拉多选树状图。使用这个组件，可以方便地展示具有层级关系的数据，并让用户灵活选择多个选项。