Vue搜索下拉与层级多选组件怎么实现

Vue搜索下拉组件可以使用element-ui的Select组件结合el-select-search组件实现。具体流程如下：

1. 安装element-ui和el-select-search组件：

npm install element-ui el-select-search --save

2. 在main.js中引入并使用element-ui：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3. 在需要使用搜索下拉组件的地方引入el-select-search组件：

import ElSelectSearch from 'el-select-search';

4. 在template中使用el-select-search组件：

<el-select v-model="selectedItem" placeholder="请选择" filterable>
  <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
    <template v-if="item.children">
      <el-option-group v-for="(child, i) in item.children" :key="i" :label="child.label">
        <el-option v-for="(c, j) in child.children" :key="j" :label="c.label" :value="c.value"></el-option>
      </el-option-group>
    </template>
  </el-option>
</el-select>

其中，options为一个数组，可以根据需要进行配置，包含label和value等属性。如果需要实现多级下拉，则可以在options中增加children属性。

层级多选组件可以使用vue-treeselect组件实现。具体流程如下：

1. 安装vue-treeselect组件：

npm install vue-treeselect --save

2. 在需要使用组件的地方引入vue-treeselect组件：

import VueTreeselect from '@riophae/vue-treeselect';

3. 在template中使用vue-treeselect组件：

<vue-treeselect
  v-model="selectedItems"
  :multiple="true"
  :options="options"
  :clearable="true"
  :close-on-select="false"
  :open-on-focus="true"
  :flatten-search-results="false"
  :limit="Infinity"
  :limit-text="count => `and ${count} more`"
  :searchable="true"
  :show-counts="true"
  :show-counts-before-parent="false"
  :show-counts-inside-parent="false"
  :show-counts-after-parent="false"
  :check-strictly="true"
  :default-expand-level="Infinity"
  :auto-expand-parent="false"
  :auto-collapse-disabled-nodes="false"
  :emit-value="true"
  :value-format="id => id"
  :label-format="label => label"
  :branch-nodes-first="false"
  :sort-value-by="default"
  :open-direction="auto"
  :open-on-mount="false"
  :open-on-click="false"
  :open-on-arrow="true"
  :highlight-matched-text="true"
  :disable-fuzzy-match="false"
  :match-path="false"
  :show-pointer="false"
  :backspace-remove-last="true"
  :tab-selects-match="true"
  :custom-label="null"
  :custom-no-data-text="null"
  :custom-search-icon="null"
  :debounce-search-ms="250"
  :show-dropdowns="true"
  :show-checkboxes="false"
  :show-branch-nodes="true"
  :show-branch-toggle="true"
  :show-node-icons="false"
  :show-tags="false"
  :show-loading="false"
  :loading-icon="null"
  :no-data-text="null"
  :no-results-text="null"
  :indent="16"
  :class-name="null"
  :input-class-name="null"
  :dropdown-class-name="null"
  :disabled="false"
  :readonly="false"
  :required="false"
  :tabindex="0"
  :name="null"
  :id="null"
  :size="null"
  :placeholder="null"
  :autofocus="false"
  :blur-on-select="false"
  :reset-on-select="false"
  :close-on-select="false"
  :close-on-blur="true"
  :close-on-select-with-parent="false"
  :open-on-clear="false"
  :cancelable="true"
  :filterable="false"
  :filter-placeholder="null"
  :filter-method="null"
  :copy-props="null"
  :multiple-limit="Infinity"
  :multiple-limit-text="count => `and ${count} more`"
  :flatten-nodes="false"
  :before-clear="null"
  :before-expand="null"
  :before-collapse="null"
  :before-select="null"
  :before-remove="null"
  :before-create="null"
  :before-sort="null"
  :before-search="null"
  :clear-on-select="false"
  :clear-on-close="false"
  :clear-on-blur="false"
  :clear-on-select-with-parent="false"
  :create-on-enter="false"
  :create-on-space="false"
  :create-on-blur="false"
  :create-on-paste="false"
  :clone=true
  :match-keys="['label', 'id']"
  :search-key="null"
  :multiple-separator=", "
/>

其中，options为一个树形结构的数组，可以根据需要进行配置。selectedItems为一个数组，用于存储已选中的多个值。其它属性可以根据需要进行配置。