需求: 需要实现 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' }// 其他表单字段...]}},
效果实现 如图
如果你觉得有用 请 点赞 + 收藏 !!!