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;
    }