VUE动态添加行

系列文章目录

---

一、页面效果

效果1：
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/32abc834de9ddc463c087de3f96a9b80.png
效果2：
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a6bfcb647f85cac8d2bddf0a48df5469.png

二、代码示例

1.data

代码如下（示例）：

data() {
    return {
    	AnnualData: [{
	        item: "",
	        iteDesc: "",
      }],
      itemList: [
        { value: "1000", label: "A" },
        { value: "2000", label: "B" },
        { value: "3000", label: "C" },
        { value: "4000", label: "其他" },
      ]
    }
}

2.methods

代码如下（示例）：

    //增加行
    handleAddLine() {
      if (this.AnnualData== undefined) {
        this.AnnualData= new Array();
      }
      let obj = {};
      this.AnnualData.push(obj);
    },
    //删除行
    delete(index) {
      console.log(index);
      this.AnnualData.splice(index, 1)
    },

---

3.template

<div style="margin-top: 30%; margin-left: 15%;">
			<el-button round type="success" size="mini"   @click="handleAddLine()" >增加行</el-button>
		  </div>
<el-table :data="tableNewDataTeam" stripe style="width: 100%;">
                          <el-table-column prop="subTeam" label="团队" width="180" style="color: crimson;">
                            <template slot-scope="scope">
                              <el-select v-model="scope.row.subTeam" placeholder="请选择"  clearable>
                                <el-option v-for="item in subTeamNames" :key="item.value" :label="item.label" :value="item.value"/>
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column prop="userName" label="姓名" width="160">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.userName" disabled>
                                  <el-button type="primary" size="mini" plain slot="append" @click="getListInfo(scope.row,scope.$index)">
                                    <i class="el-icon-search"></i></el-button>
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column prop="userPhone" label="联系方式" width="150">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.userPhone" disabled/>
                            </template>
                          </el-table-column>
                          <el-table-column prop="teamRole" label="角色" width="160">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.teamRole" disabled/>
                            </template>
                          </el-table-column>
                          <el-table-column prop="teamOrg" label="机构" :show-overflow-tooltip="true" width="280">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.teamOrg" disabled/>
                            </template>
                          </el-table-column>
                          <el-table-column prop="operate" label="操作">
                            <template slot-scope="scope">
                              <el-button  type="danger" size="mini" circle  @click="delete(scope.$index, scope.row)">删除行</el-button>
                            </template>
                          </el-table-column>
                        </el-table>

注：

安装相应依赖