vue 實現在同一介面實現元件的動態新增和刪除功能
阿新 • • 發佈：2020-06-17
1.插入靜態元件，將自己想要迴圈的元件顯示在頁面上，利用v-for進行迴圈操作，操作包括增刪。
//所有要顯示的子元件，寫在一個li標籤，有 v-for迴圈。
<liv-for="(item,index)inquestionList"v-bind:key="index">
<el-row:gutter="20">
<el-coloffset="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-coloffset="3":span="3">
<el-select
style="margin-left:-30px"
size="small"
v-model="item.value"
placeholder="請選擇">
<el-option
v-for="iteminquestionoptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
<el-coloffset="2":span="4">
<el-inputstyle="width:45px;"size="small"v-model="count">
{{item.count}}
</el-input>
<label> /0 </label>
</el-col>
<el-col:span="6">
<el-inputstyle="width:45px;"size="small"v-model="sourcess">
{{item.sourcess}}
</el-input>
<label> </label>
<!--在i標籤設定刪除按鈕，運用splice函式。-->
<iclass="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函式，具體的使用可以自己瞭解。
<i class="el-icon-remove-outline" style="margin-left:20px" @click="questionList.splice(index,1)"> </i>
4.效果
PS：在Vue元件上動態新增和刪除屬性方法
如下所示：
在元件上新增屬性 this.$set(this.data,"obj",value');
刪除屬性this.$delete(this.data,value');
總結
到此這篇關於vue 實現在同一介面實現元件的動態新增和刪除的文章就介紹到這了,更多相關vue 元件動態新增和刪除內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！