標簽組件的效果如下

組件作用

• 這是一個div，包含了兩個文本框，後面是添加和刪除按鈕
• 添加按鈕複製出新的div，除了文本框沒有內容，其它都上面一樣
• 刪除按鈕將當前行div刪除

組件實現

<template>
  <div>
    <template v-for="(item,index) in tags">
      <el-row :gutter="4" style="margin:5px;">
        <el-col :span="8">
          <el-input v-model="item.authorName" placeholder="作者名稱"/>
        </el-col>
        <el-col :span="8">
          <el-input v-model="item.authorUnit" placeholder="作者單位名稱"/>
        </el-col>
        <el-col :span="4">
          <el-button type="text" @click="addAuthor">添加</el-button>
          <span style="padding:2px;">|</span>
          <el-button type="text" @click="delAuthor(index)">刪除</el-button>
        </el-col>
      </el-row>
    </template>
  </div>
</template>


<script>
export default {
  name: "AuthorUnit",
  props: {dic: {type: Array, default: []}},
  data() {
    return {
      tags: [],
    };
  }, created() {
    if(this.dic!=null && this.dic.length>0){
      this.tags = this.dic;//關鍵字初始化，dic的值來自於父組件（調用它的組件叫父組件）
    }
  },
  methods: {
    addAuthor() {
      this.tags.push({authorName: '', authorUnit: ''});
    },
    delAuthor(index) {
      this.tags.splice(index, 1);
    },
  },
}
</script>

調用組件，為組件傳預設值

<el-form-item label="作者信息" prop="articleAuthorList">
  <author-unit v-model="form.articleAuthorList" :dic="form.articleAuthorList"/>
</el-form-item>

測試代碼

提交之後，將出現當前你添加的這個列表的對象，對接後端介面，將這個數組POST到後端即可，如圖所示：

作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980

支付寶掃一掃，為大叔打賞!