Vue Element-ui Table实现动态新增和删除

 达到效果：1.点击添加动态添加一行表格数据 2.点击移除删除一行

 

 

templete部分代码

<el-tab-pane label="股东情况"> 
        <el-row>
         <el-col :span="24">
             <el-table border="" :data="value.listItem" show-summary="" :summary-method="getSummaries">
                  <el-table-column align="left" width="100">
                    <template slot="header" slot-scope="scope">
                      <el-button width="100%" @click="clickAddProblems(scope.row)" icon="iconfont icon-add" type="text" size="small">添加</el-button>
                    </template>
                    <template slot-scope="scope">
                      <el-button width="100%" @click="clickRemoveProblems(scope.row)" icon="iconfont icon-guanbi" type="text" size="small">移除</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
                  <el-table-column align="center" label="股东名称" prop="shareholderName">
                    <template slot-scope="scope">
                      <el-form-item :prop="'listItem.'+ scope.$index + '.shareholderName'" :rules="rules.shareholderName" label-width="0px">
                        <el-input v-model.trim="scope.row.shareholderName" placeholder="请填写股东名称"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="认缴注册资本（万元）" prop="registeredCapital">
                    <template slot-scope="scope">
                      <el-form-item :prop="'listItem.'+ scope.$index + '.registeredCapital'" :rules="rules.registeredCapital" label-width="0px">
                        <el-input v-model.trim="scope.row.registeredCapital" placeholder="请填写认缴注册资本（万元）"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="实缴注册资本（万元）" prop="paidinRegisteredCapital">
                    <template slot-scope="scope">
                      <el-form-item :prop="'listItem.'+ scope.$index + '.paidinRegisteredCapital'" :rules="rules.paidinRegisteredCapital" label-width="0px">
                        <el-input v-model.trim="scope.row.paidinRegisteredCapital" placeholder="请填写实缴注册资本（万元）"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="持股比例（%）" prop="shareholdingRatio">
                    <template slot-scope="scope">
                      <el-form-item :prop="'listItem.'+ scope.$index + '.shareholdingRatio'" :rules="rules.shareholdingRatio" label-width="0px">
                        <el-input v-model.trim="scope.row.shareholdingRatio" placeholder="请填写持股比例" max="100"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>
         </el-col>
        </el-row>
       </el-tab-pane>

查看代码