Ant Design Vue の a-tree-select

Ant Design Vue は、最も人気のある vue フレームワークの 1 つであり、主に a-tree-select の簡単な使用法を示しています。a-tree-select コンポーネントは、主にツリー構造の選択を表示するために使用されます。
<テンプレート> 
  <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:
          :replaceFields="{ラベル: 'name', key: 'val',value: 'val' }" show 
          -searchtreeDefaultExpandAll 
          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" 
      </a-form-item> 
        label="棚にあるかどうか">
        <a-input-number v-decorator="[ 'isSail', {}]" />

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

おすすめ

転載: blog.csdn.net/qq_40263927/article/details/128809019