最近項目中用到了通過VUE element組件實現點擊加號新增一行，點擊減號刪除一行，
廢話不多說了，直接上代碼，
HTML部分：
<i class="el-icon-plus clolos1" @click="addPdfFile"></i>
//加號（增加一行）
<div class="add_pdf" v-for="(item, index) in addPdf" :key="index">
<div v-show="index !== 0">
<i class="el-icon-delete clolos clolos3" @click="deletePdf(index)"></i>
//減號（刪除一行）
</div>
<span>新增PDF</span>
<el-row :gutter="20">
<el-col :span="10">
<div>
<el-form-item label="語言：" prop="language">
<el-select v-model="form.language" placeholder="請選擇">
<el-option label="英語" value="英語"></el-option>
<el-option label="日語" value="日語"></el-option>
<el-option label="德語" value="德語"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="10">
<div>
<el-form-item label="產品類別：" prop="productCategory">
<el-select v-model="form.productCategory" placeholder="請選擇">
<el-option label="呼吸機" value="呼吸機"></el-option>
<el-option label="麻醉機" value="麻醉機"></el-option>
<el-option label="手術燈" value="手術燈"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="22">
//將兩個文本框放在了同一行
<el-col :span="10">
<div>
<el-form-item label="彩頁名稱：" prop="colorName">
<el-input type="text" style="width:165px" v-model="form.colorName"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div>
<el-form-item label="彩頁圖片：" prop="colorImage">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
v-model="form.colorImage"
>
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
</el-form-item>
</div>
</el-col>
</el-row>
</div>
js部分：
export default {
data() {
return {
addPdf: [1],
};
css部分：
<style lang='less' scoped>
.clolos1 {
//增加按鈕樣式
width: 13px;
height: 30px;
background: #29affb;
line-height: 30px;
padding: 0 10px;
border-radius: 15px;
color: #fff;
position: absolute;
margin-left: 65.35%;
margin-top: 8.48%;
z-index: 1;
}
.clolos2 {
width: 13px;
height: 30px;
background: #29affb;
line-height: 30px;
padding: 0 10px;
border-radius: 15px;
color: #fff;
position: absolute;
margin-left: 65%;
margin-top: 7%;
}
.clolos3 {
//刪除按鈕樣式
width: 13px;
height: 30px;
background: red;
line-height: 30px;
padding: 0 10px;
border-radius: 15px;
color: #fff;
position: absolute;
margin-left: calc(100% + 40px);
margin-top: 10%;
}
.add_pdf {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
width: 80%;
position: relative;
margin-top: 3%;
}
.basicinformation {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
width: 80%;
position: relative;
}
</style>
寫到這里估計大大多數小伙伴應該能領悟到了這個功能是如何實現了吧，我是新手小白，
立志於為更多新手小白寫下更簡單、更通俗易懂、更一目了然的代碼。希望大家多多關注我