el-form里面表单遍历渲染,里面放el-row,一行放3个表单怎么实现

需求: 需要实现 el-form里面的表单遍历渲染,里面放el-row,一行放3个表单怎么实现?
废话不多说直接上demo

bash 复制代码
 <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>
bash 复制代码
 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' }
        // 其他表单字段...
      ]

    }
  },

效果实现 如图

如果你觉得有用 请 点赞 + 收藏 !!!

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互