Vue + ElementUI 实现一个动态添加元素的小例子

最新推荐文章于 2025-03-10 09:42:30 发布

热爱代码的葫芦娃

最新推荐文章于 2025-03-10 09:42:30 发布

阅读量9.2k

点赞数 5

分类专栏： vue 文章标签：动态添加html元素

本文链接：https://blog.youkuaiyun.com/qq_38906291/article/details/103277476

版权

实现一个动态添加元素的小例子
在这里插入图片描述
这样效果实现的思路是，让这个动态加载元素绑定一个数组，通过修改数组中的元素来实现动态的添加元素效果：

好了主要的前端代码如下：

<el-form :model="conforderform" ref="conforderform" label-width="100px" class="demo-ruleForm">

	<el-form-item label="上次所提议题" >
              <!-- 渲染问题列表 -->
              <section v-for="(value, index) in conforderform.lastquestions" :key="index">
                <section v-if="index === 0">
                  <el-row>
                    <el-col :span="15">
                      <el-input v-model="conforderform.lastquestions[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index, '1')"/>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" icon="el-icon-plus" plain style=