Ant Design Vue 是比较流行的vue框架之一，主要是展示a-tree-select 的简单用法，a-tree-select组件主要用于展示树结构的选择。
<template>
  <a-spin :spinning="confirmLoading">
    <a-form :form="form">

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="物品名称">
        <a-input placeholder="请输入物品名称" v-decorator="['goodsName', {}]" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="物品类型">
        <a-tree-select
          style="width:100%"
          :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
          :treeData="goodsTypeList"
          :replaceFields="{label: 'name', key: 'val',value: 'val' }"
          show-search
          treeDefaultExpandAll
          tree-node-filter-prop="title"
          placeholder="请选择物品类型"
          :getPopupContainer="(node) => node.parentNode"
          v-decorator.trim="[ 'goodsType', validatorRules.required]">
        </a-tree-select>

      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="物品品相">
        <a-input-number v-decorator="[ 'goodsPx', {}]" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="物品原价">
        <a-input-number v-decorator="[ 'originalPrice', {}]" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="物品现价">
        <a-input-number v-decorator="[ 'goodsPrice', {}]" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="是否有效">
        <a-input-number v-decorator="[ 'isValid', {}]" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="是否上架">
        <a-input-number v-decorator="[ 'isSail', {}]" />
      </a-form-item>

    </a-form>
  </a-spin>
</template>