關于vue 使用 element UI 中Table 表格 資料統計後的小數點後的9999999999

對于引入element UI 是導入Table 表格的方法我就不詳情說了，開始正文！

使用Table 表格 資料統計後的小數點後的9999999999，如圖

比如 電話号碼 在元件中，如果不做處理，他也是會對電話進行相加的，是以需要 對渲染的電話号碼進行字元串的轉換

<el-table-column  label="員工電話" width="130px">
             <template slot-scope="scope">
                 <span> {{String(scope.row.mobile)}}</span>
             </template>
</el-table-column>
           

下面的是引用官方文檔的表格進行了修改

<template>
  <div>
		<el-table
		    :data="tableData"
		    border
		    :summary-method="getSummaries"
		    show-summary
		    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  label="員工電話" width="130px">
		             <template slot-scope="scope"> 
		                 <span> {{String(scope.row.mobile)}}</span>  //對電話号碼進行字元串的轉換
		             </template>
		    </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>
  </div>
</template>


           

下面就是js代碼

data() {
      return {
        tableData: [{
          id: '12987122',
          name: '王小虎',
          mobile:[phone]
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          mobile:[phone]
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          mobile:[phone]
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
		  mobile:[phone]
          amount1: '621',
          amount2: '2.92',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          mobile:[phone]
          amount1: '539',
          amount2: '4.21',
          amount3: 15
        }]
      };
    },
    methods: {
         // 表格最後一行的總價
    getSummaries(param) {
        console.log(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] = "";
          }
        });
        if (sums.length===6) { //這個 6 是表格的列數
            for (let u = 1; u < sums.length; u++) {  //u=1是因為一開始sums[0]的值就為"合計"
                if (sums[u]) {  //判斷sums[u]是否有值 
                   sums[u] = Math.round(sums[u] * 100) / 100  //可以對精度進行控制，保留兩位小數點
                   //如果是想保留三位小數 100改為1000即可
                }   
            }
               
        }
        return sums;
      }
    }

           

這就完事了！

很簡單 但是一開始卻沒那麼簡單 沒想到塊去，共同進步！！