antd form 表單巢狀
阿新 • • 發佈:2022-03-10
q:一行放兩個必填輸入框的,有什麼好方法嗎
a: form-item裡面嵌2個form-item
後臺互動介面你自己定就好,幹嘛非要跟著產品來
<a-form-item label="價格" :labelCol="labelCol" :wrapperCol="wrapperCol" > <span class="myRedStar">*</span> <!-- <a-slider range :default-value="[0, 0]" />--> <a-form-item class="price_max" style="display:inline-block;width:120px;" :labelCol="labelCol" :wrapperCol="wrapperCol" > <a-input-number class="price_min" style="width: 110px" :max="100" :min="0" v-decorator="[ 'price_min', {rules: [{ required: true, message: '請輸入下限' }], initialValue: currentRecord.price_min} ]" placeholder="下限" /> </a-form-item> <spanstyle="display:inline-block;margin-right: 16px">~</span> <a-form-item class="price_max" style="display:inline-block;width:120px;" :labelCol="labelCol" :wrapperCol="wrapperCol" > <a-input-number style="width: 110px" :max="100" :min="0" v-decorator="[ 'price_max', {rules: [{ required: true, message: '請輸入上限' }], initialValue: currentRecord.price_max} ]" placeholder="上限" /> </a-form-item> </a-form-item>
<style lang="less"> .myRedStar { position: absolute; left: -54px; top: 2px; display: inline-block; font-family: SimSun; line-height: 1; font-size: 14px; color: #f5222d; } </style>