table表格-表尾合计行

╰+哭是因爲堅強的太久メ 2022-03-18 13:22 868阅读 0赞

若表格展示的是各类数字，可以在表尾显示各列的合计。  
1、show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是  
显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。  
2、你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计  
行的各列中summary-method 自定义的合计计算方法 Function(\{ columns, data \})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

<el-table
          :data="tableData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="数值1"
            sortable>
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="数值2"
            sortable>
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="数值3"
            sortable>
          </el-table-column>
        </el-table>
    
        <el-table
          :data="tableData"
          border
          show-summary
          :summary-method="getSummaries"
          height="200"
          style="width: 100%; margin-top: 20px">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="数值 1（元）">
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="数值 2（元）">
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="数值 3（元）">
          </el-table-column>
        </el-table>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            tableData:[
              {
                id:'12987122',
                name: '王大虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
              }, {
                id: '12987123',
                name: '王二虎',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
              }, {
                id: '12987124',
                name: '王三虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
              }, {
                id: '12987125',
                name: '王四虎',
                amount1: '621',
                amount2: '2.2',
                amount3: 17
              }, {
                id: '12987126',
                name: '王五虎',
                amount1: '539',
                amount2: '4.1',
                amount3: 15
              }
            ]
          }
        },
        /*
        * columns:数组格式（与列数相等），包含列信息，label，property存储列名信息
        * data：数组格式（与行数相等），包含行数据信息（列名：值 的形式）
        * */
        methods: {
          getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            //循环处理所有列数据
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '总价';
                return;
              }
              //将每列的所有数据数字化处理成一个数组
              const values = data.map(item => Number(item[column.property]));
              //当前列的所有数据全是数字类型时
              if (!values.every(value => isNaN(value))) {
                //将当前列数据数组中的所有值，从左到右依次累加处理
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] += ' 元';
              } else {
                sums[index] = 'N/A';
              }
            });
    
            return sums;
          }
        }
      })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220318/9acc8a0dc167428cb24f966a233857cc.png