zoukankan      html  css  js  c++  java
  • 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;
        }
    查看代码
  • 相关阅读:
    idea主题更换pycharm/intellij
    随机生成n张扑克牌。
    JAVA生成6个1-8的随机数,要求无重复。
    一道简单 的循环
    linux虚拟机互访
    linux中grep命令
    vi和vim编辑器
    文件压缩打包以及备份
    文件内容查询
    目录相关操作
  • 原文地址:https://www.cnblogs.com/wofeiliangren/p/14927521.html
Copyright © 2011-2022 走看看