el-tree 多层（第4层）嵌套提交，结合el-form校验el-input（vue3）

菜鸟的备忘录

已于 2023-04-24 13:44:29 修改

阅读量425

点赞数

分类专栏：常用code 文章标签： vue.js javascript 前端 html js

于 2023-04-24 11:18:25 首次发布

本文链接：https://blog.youkuaiyun.com/hilary_front/article/details/130338525

版权

本文介绍如何在Vue3中使用el-tree组件实现四层深度的嵌套，并结合el-form进行输入框校验。关键点在于使用reactive包裹数据，确保双向绑定。示例中展示了最终实现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先定义treeData：

重点，一定是reactive，并且在对象里面定义数组，这样才能实现双向绑定

const treeData = reactive({ list: [] });

然后实现4层嵌套

<el-form ref="formRef" :model="treeData" :rules="formRules">
            <el-form-item style="width: 100%">
              <template
                v-for="(formItem, index) in treeData.list"
                style="width: 100%"
              >
                <div style="width: 100%">
                  <el-row class="mt-2" style="font-size: 24px; font-weight: 600"
                    >一级指标</el-row
                  >
                  <el-row class="mt-2 ml-7">
                    <el-col :span="2" class="pl-2 py-2 bg-gray-200">
                      指数名称
                    </el-col>
                    <el-col :span="4" class="pl-2 py-2 bg-gray-50">
                      {
  { formItem.name }}
                    </el-col>
                    <el-col :span="2" class="pl-2 py-2 bg-gray-200">
                      <span>权重值</span>
                    </el-col>
                    <el-col :span="4" class="pl-2 py-2 bg-gray-50"

最低0.47元/天解锁文章