vue 实现在同一界面实现组件的动态添加和删除

逃离我推掉我的手 2023-02-18 03:16 33阅读 0赞

1.插入静态组件，将自己想要循环的组件显示在页面上，利用v-for进行循环操作，操作包括增删。

//所有要显示的子组件，写在一个li标签，有 v-for循环。
      <li v-for="(item, index) in questionList" v-bind:key="index">
              <el-row :gutter="20">
                <el-col offset="2" :span="4">
                  <el-select
                    size="small"
                    v-model="chooseValue"
                    multiple
                    placeholdr="请选择试题类型"
                    style="width:200px;margin-left:-40px"
                  >
                    <el-option :value="item.mineStatusValue" style="height:auto">
                      <el-tree
                        :data="data"
                        node-key="id"
                        :props="defaultProps"
                        @node-click="handleNodeClick"
                      ></el-tree>
                    </el-option>
                  </el-select>
                </el-col>
                <el-col offset="3" :span="3">
                  <el-select
                    style="margin-left:-30px"
                    size="small"
                    v-model="item.value"
                    placeholder="请选择">
                    <el-option
                      v-for="item in questionoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col offset="2" :span="4">
                  <el-input style="width:45px;" size="small" v-model="count">
                    {
       { item.count }}
                  </el-input>
                  <label> /0 </label>
                </el-col>
                <el-col :span="6">
                  <el-input style="width:45px;" size="small" v-model="sourcess">
                    {
       { item.sourcess }}
                  </el-input>
                  <label>  </label>
                  
                  <i class="el-icon-remove-outline"
                    style="margin-left:20px"
                    @click="questionList.splice(index, 1)"
                  ></i>

2.增

在方法添加按钮，在点击添加按钮的时候将需要的参数传进数组，遍历数组，达到组件渲染。

//添加试题，组件循环显示
        addQuestion() {
          console.log("添加试题");
          this.questionList.unshift({
            mineStatusValue: this.mineStatusValue,
            questionoptions: this.questionoptions,
            count: this.count,
            sourcess: this.sourcess,
          });
        },

3.删

根据选中的组件，获取它的索引，根据下标把它删掉，更新数组，重选渲染组件。

注：删除的时候用到了splic函数，具体的使用可以自己了解。

4.效果

![20200615192149401.gif][]

[20200615192149401.gif]: https://img-blog.csdnimg.cn/20200615192149401.gif