实现十万条数据展示页面

 npm install umy-ui

 在main.js中

  import UmyUi from 'umy-ui'
  import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
  Vue.use(UmyUi);

    <u-table
    :data="tableData"
    height="500"
    :summary-method="summaryMethod"
    show-summary
    style="margin-top: 20px">
    <u-table-column
      prop="id"
      label="ID"
      width="180">
    </u-table-column>
    <u-table-column
      prop="name"
      label="姓名">
    </u-table-column>
    <u-table-column
      prop="amount1"
      label="数值 1（元）">
    </u-table-column>
    <u-table-column
      prop="amount2"
      label="数值 2（元）">
    </u-table-column>
    <u-table-column
      prop="amount3"
      label="数值 3（元）">
    </u-table-column>
       <u-table-column
      prop="amount4"
      label="数值 4（元）">
    </u-table-column>
       <u-table-column
      prop="amount5"
      label="数值 5（">
    </u-table-column>
  </u-table>

  methods: {
     summaryMethod ({ columns, data }) {
      // console.log(columns,'columns');
      // console.log(data,'data');
         // 平均值算法（不需要自己去掉）
        //  function cacl(arr, callback) {
        //      let ret;
        //      for (let i=0; i<arr.length;i++) {
        //          ret = callback(arr[i], ret);
        //      }
        //      return ret;
        //  }
        //  // 平均值算法（不需要自己去掉）
        //  Array.prototype.sum = function () {
        //      return cacl(this, function (item, sum) {
        //          if (typeof (sum) == 'undefined') {
        //              return item;
        //          }
        //          else {
        //              return sum += item;
        //          }
        //      });
        //  };
        //  // 平均值算法（不需要自己去掉）
        //  Array.prototype.avg = function () {
        //      if (this.length == 0) {
        //          return 0;
        //      }
        //      return this.sum(this) / this.length;
        //  };
         const means = [] // 合计
        //  const fenceSums = [] // 平均值
         columns.forEach((column, columnIndex) => {
         // column 表头的数据
         // columnIndex表头的索引号
             if (columnIndex === 0) {
                 means.push('合计')
                //  fenceSums.push('平均值')
             }else if(columnIndex === 3){
              const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                     means[columnIndex] = values.reduce((prev, curr) => {
                         const value = Number(curr);
                         if (!isNaN(value)) {
                             return prev + curr;
                         } else {
                             return prev;
                         }
                     }, 0);
                     // means[columnIndex] += ' 元'
                     // 改变了ele的合计方式，扩展了合计场景
                     // 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
                     // means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
                     means[columnIndex] =  (+ means[columnIndex]).toFixed(2)
                 } 
             }else if(columnIndex === 5){
              const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                     means[columnIndex] = values.reduce((prev, curr) => {
                         const value = Number(curr);
                         if (!isNaN(value)) {
                             return prev + curr;
                         } else {
                             return prev;
                         }
                     }, 0);
                     // means[columnIndex] += ' 元'
                     // 改变了ele的合计方式，扩展了合计场景
                     // 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
                     // means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
                     means[columnIndex] =  (+ means[columnIndex]).toFixed(3) + '元'
                 } 
             } else {
                 const values = data.map(item => Number(item[column.property]));
                 // 合计
                 console.log(values,'values');
                 if (!values.every(value => isNaN(value))) {
                     means[columnIndex] = values.reduce((prev, curr) => {
                         const value = Number(curr);
                         if (!isNaN(value)) {
                             return prev + curr;
                         } else {
                             return prev;
                         }
                     }, 0);
                     // means[columnIndex] += ' 元'
                     // 改变了ele的合计方式，扩展了合计场景
                     // 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
                     // means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
                     means[columnIndex] =  + means[columnIndex] 
                 } else {
                     means[columnIndex] = '';
                 }
                 // 平均值
                //  const precisions = [];
                //  let notNumber = true;
                //  values.forEach(value => {
                //      if (!isNaN(value)) {
                //          notNumber = false;
                //          let decimal = ('' + value).split('.')[1];
                //          precisions.push(decimal ? decimal.length : 0);
                //      }
                //  });
                //  if (!notNumber) {
                //      fenceSums[columnIndex] = values.avg()
                //  } else {
                //      fenceSums[columnIndex] = '';
                //  }
             }
         })
         // 返回一个二维数组的表尾合计(不要平均值，你就不要在数组中添加)
         return [means]
     },
  },

通过判断索引号，自定义处理合计中的数据，保留小数点之类的