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>

查看代码

script部分代码

clickAddProblems(rows){
     $this.value.listItem.push({
       key:guid.newGuid(),
       shareholderName:'',
       registeredCapital:null,
       paidinRegisteredCapital:null,
       shareholdingRatio:null
     })
    },
    clickRemoveProblems(row){
       console.log("row:", row);
       $this.value.listItem= $this.value.listItem.filter(x => {
        return x.key != row.key;
      });
    },

查看代码

表格添加合计行
1. el-table 中添加 show-summary 属性 :summary-method 绑定合计的方法

<el-table border="" :data="value.listItem" show-summary="" :summary-method="getSummaries">

2. 绑定的合计方法

getSummaries(param){
        const { columns, data } = param;
        const sums = [];
         columns.forEach((column, index) => {
         if (index === 0) {
            sums[index] = '合计';
            return;
          } 
          if (index === 0||index === 1||index === 2) {
            sums[index] = '';
            return;
          } 
          const values = data.map(item => Number(item[column.property]));
          console.log(column.property);
          console.log(data);
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              console.log(curr);
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            if(index==5){
               sums[index] += ' %';
            }
            else{
             sums[index] += ' 万元';
            }
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
    }

查看代码

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

推荐阅读