vue vxe-table vxe-form 表格,摺疊表單,表格校驗,動態生成表單,表單配置

查看官網示例:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/fullEdit

在這裏插入圖片描述
在這裏插入圖片描述

<vxe-form :data="formData4" title-align="right" title-width="100" @submit="searchEvent" @reset="resetEvent">
  <vxe-form-item title="名稱" field="name" span="8">
     <vxe-input v-model="formData4.name" placeholder="請輸入名稱"></vxe-input>
   </vxe-form-item>
   <vxe-form-item title="暱稱" field="nickname" span="8" :title-prefix="{ message: '請輸入漢字!', icon: 'fa fa-exclamation-circle' }">
     <vxe-input v-model="formData4.nickname" placeholder="請輸入暱稱"></vxe-input>
   </vxe-form-item>
   <vxe-form-item title="性別" field="sex" span="8">
     <select v-model="formData4.sex" class="vxe-select">
       <option value="0"></option>
       <option value="1"></option>
       <option value="2"></option>
     </select>
   </vxe-form-item>
   <vxe-form-item title="年齡" field="age" span="8" :title-prefix="{ message: '請輸入數值!', icon: 'fa fa-info-circle' }">
     <vxe-input v-model="formData4.age" type="number" placeholder="請輸入年齡"></vxe-input>
   </vxe-form-item>
   <vxe-form-item title="區域" field="region" span="8">
     <vxe-input v-model="formData2.region" placeholder="請輸入區域"></vxe-input>
   </vxe-form-item>
   <vxe-form-item title="狀態" field="status" span="8">
     <select v-model="formData4.status" class="vxe-select">
       <option value=""></option>
       <option value="0">失敗</option>
       <option value="1">成功</option>
     </select>
   </vxe-form-item>
   <vxe-form-item title="身高" field="height" span="8" folding>
     <vxe-input v-model="formData4.height" placeholder="請輸入身高"></vxe-input>
   </vxe-form-item>
   <vxe-form-item title="體重" field="weight" span="8" folding>
     <vxe-input v-model="formData4.weight" placeholder="請輸入體重"></vxe-input>
   </vxe-form-item>
   <vxe-form-item title="是否單身" field="single" span="8" folding>
     <vxe-radio-group v-model="formData4.single">
       <vxe-radio label="1"></vxe-radio>
       <vxe-radio label="0"></vxe-radio>
     </vxe-radio-group>
   </vxe-form-item>
   <vxe-form-item align="center" span="24" collapse-node>
     <vxe-button type="submit" status="primary">查詢</vxe-button>
     <vxe-button type="reset">重置</vxe-button>
   </vxe-form-item>
</vxe-form>
export default {
  data () {
     return {
       formData4: {
         name: '',
         nickname: '',
         sex: '',
         age: 30,
         status: '1',
         region: null,
         height: '178',
         weight: null,
         single: '1'
     }
   }
}
發佈了28 篇原創文章 · 獲贊 34 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章