需求: 需要實現 el-form里面的表單遍歷渲染,里面放el-row,一行放3個表單怎么實現?
廢話不多說直接上demo
<el-form ref="form" :model="form" label-width="80px"><el-row v-for="(row, index) in Math.ceil(formFields.length / 3)" :key="index"><el-col v-for="(field, fieldIndex) in formFields.slice(index * 3, (index + 1) * 3)" :key="fieldIndex" :span="8"><el-form-item :label="field.label" :prop="field.prop"><el-input v-model="field.prop" :placeholder="'請輸入' + field.label " /></el-form-item></el-col></el-row></el-form>
data() {return {formFields: [{ label: '字段1', prop: 'field1' },{ label: '字段2', prop: 'field2' },{ label: '字段3', prop: 'field3' },{ label: '字段4', prop: 'field4' },{ label: '字段5', prop: 'field5' },{ label: '字段6', prop: 'field6' }// 其他表單字段...]}},
效果實現 如圖
如果你覺得有用 請 點贊 + 收藏 !!!