Ant Design Vue is one of the more popular vue frameworks. It mainly shows the simple usage of a-tree-select. The a-tree-select component is mainly used to display the selection of tree structure.
<template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="item name">
<a-input placeholder="Please enter the item name" v-decorator="['goodsName', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol ="wrapperCol"
label="item type">
<a-tree-select
style="width:
: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',{}]" />
label="Item original price">
:wrapperCol="wrapperCol"
<a-form-item
</a-form-item>
:labelCol="labelCol"
<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',{}]" />
label="Whether it is on the shelves">
:wrapperCol="wrapperCol"
:labelCol="labelCol"
<a-form-item
</a-form-item>
<a-input-number v-decorator="[ 'isSail', {}]" />
</a-form-item>
</a-form>
</a-spin>
</template>
