溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue表格計(jì)算總計(jì)的方法

發(fā)布時(shí)間：2022-08-01 11:14:32 來源：億速云 閱讀：478 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“vue表格計(jì)算總計(jì)的方法”，在日常操作中，相信很多人在vue表格計(jì)算總計(jì)的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue表格計(jì)算總計(jì)的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

vue表格計(jì)算總計(jì)

<el-table
        v-loading="loading"
        :summary-method="getSummaries"
        show-summary
        :data="abcList"
        border
        tooltip-effect="darkTable"
      >

首先需要在table標(biāo)簽中添加

:summary-method="getSummaries"  // 調(diào)用方法
show-summary  //標(biāo)簽屬性
methods: {
  getSummaries(param) {
    const { columns, data } = param
    console.log(columns, data, 'columns,data')
    const sums = []
    columns.forEach((column, index) => {
      // 設(shè)置第一列的值為總計(jì)
      if (index === 0) {
        sums[index] = '總計(jì)'
        return
      }
        sums[3] = this.form.result
        sums[3] += '元'
    })
    return sums
   }
}

因?yàn)镋lement上計(jì)算總計(jì)的方法是計(jì)算當(dāng)前頁上金額的總和，稍加修改~

sums[index] = '總計(jì)'  
// 把下標(biāo)為0的列賦值為總計(jì)
sums[3] = this.form.result  
// this.form.result為init初始化時(shí)從接口中拿到的總計(jì)，賦值到下標(biāo)為3的列上
sums[3] += '元'
// 得到的總計(jì)后加上單位元

vue table表格合計(jì) ( Element )

<template>
	<el-card class="box-card">
		<!-- 只合計(jì)不做其他處理 -->
		<h3>只合計(jì)不做其他處理</h3>
		<el-table :data="tableData6" border show-summary >
			<el-table-column prop="id" label="ID" width="180" align="center">
			</el-table-column>
			<el-table-column prop="name" label="產(chǎn)品" align="center">
			</el-table-column>
			<el-table-column prop="number" label="數(shù)量" align="center">
			</el-table-column>
			<el-table-column prop="price" label="價(jià)格" align="center">
			</el-table-column>
			<el-table-column prop="profit" label="利潤(rùn)率" align="center">
			</el-table-column>
		</el-table>
 
		<!-- 簡(jiǎn)單求和實(shí)例處理 -->
		<h3 >簡(jiǎn)單求和實(shí)例處理</h3>
		<el-table :data="tableData6" border :summary-method="getSummaries01" show-summary >
			<el-table-column prop="id" label="ID" width="180" align="center">
			</el-table-column>
			<el-table-column prop="name" label="產(chǎn)品" align="center">
			</el-table-column>
			<el-table-column prop="number" label="數(shù)量" align="center">
			</el-table-column>
			<el-table-column prop="price" label="價(jià)格" align="center">
			</el-table-column>
			<el-table-column prop="profit" label="利潤(rùn)率" align="center">
			</el-table-column>
		</el-table>
 
		<!-- 指定列求和實(shí)例處理 -->
		<h3 >指定列求和實(shí)例處理</h3>
		<el-table :data="tableData6" border :summary-method="getSummaries02" show-summary >
			<el-table-column prop="id" label="ID" width="180" align="center">
			</el-table-column>
			<el-table-column prop="name" label="產(chǎn)品" align="center">
			</el-table-column>
			<el-table-column prop="number" label="數(shù)量" align="center">
			</el-table-column>
			<el-table-column prop="price" label="價(jià)格" align="center">
				<template slot-scope="scope">
					{{$utils.formSum(scope.row.price, 2, '.', ',')}}
				</template>
			</el-table-column>
			<el-table-column prop="profit" label="利潤(rùn)率" align="center">
				<template slot-scope="scope">
					{{Number(scope.row.profit).toFixed(2)}} %
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>
 <script>
	export default {
		data() {
			return {
				tableData6: [{
					id: '12987122',
					name: '襪子',
					number: '234',
					price: '3',
					profit: '10.9'
				}, {
					id: '12987123',
					name: '鞋子',
					number: '165',
					price: '343.8',
					profit: '12.00'
				}, {
					id: '12987124',
					name: '褲子',
					number: '324',
					price: '249.0',
					profit: '9'
				}, {
					id: '12987125',
					name: '腰帶',
					number: '621',
					price: '342.0',
					profit: '17.00'
				}, {
					id: '12987126',
					name: '手鐲',
					number: '539',
					price: '43421',
					profit: '153333'
				}]
			};
		},
		methods: {
			//格式化數(shù)字，格式化金額
			// formSum: function(number, decimals, dec_point, thousands_sep) {
			//   /*   
			//     * 參數(shù)說明：
 
			//     * number：要格式化的數(shù)字
 
			//     * decimals：保留幾位小數(shù)
 
			//     * dec_point：小數(shù)點(diǎn)符號(hào)
 
			//     * thousands_sep：千分位符號(hào)
 
			//     * */
			//   number = (number + '').replace(/[^0-9+-Ee.]/g, '');
			//   var n = !isFinite(+number) ? 0 : +number,
			//     prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
			//     sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
			//     dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
			//     s = '',
			//     toFixedFix = function(n, prec) {
			//       var k = Math.pow(10, prec);
			//       return '' + Math.ceil(n * k) / k;
			//     };
			//   s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
			//   var re = /(-?\d+)(\d{3})/;
			//   while (re.test(s[0])) {
			//     s[0] = s[0].replace(re, "$1" + sep + "$2");
			//   }
			//   if ((s[1] || '').length < prec) {
			//     s[1] = s[1] || '';
			//     s[1] += new Array(prec - s[1].length + 1).join('0');
			//   }
			//   return s.join(dec);
			// }
			/**
			 * 將show-summary設(shè)置為true就會(huì)在表格尾部展示合計(jì)行。
			 * 默認(rèn)情況下，對(duì)于合計(jì)行，第一列不進(jìn)行數(shù)據(jù)求合操作，
			 * 而是顯示「合計(jì)」二字（可通過sum-text配置），
			 * 其余列會(huì)將本列所有數(shù)值進(jìn)行求合操作，并顯示出來。
			 * 當(dāng)然，你也可以定義自己的合計(jì)邏輯。
			 * 使用summary-method并傳入一個(gè)方法，返回一個(gè)數(shù)組，
			 * 這個(gè)數(shù)組中的各項(xiàng)就會(huì)顯示在合計(jì)行的各列中，具體可以參考本例中的第二個(gè)表格。
			 */
 
			//簡(jiǎn)單求和實(shí)例處理
			getSummaries01(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '總價(jià)';
						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;
			},
 
 
 
			//指定列求和實(shí)例處理
			getSummaries02(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '總價(jià)';
					} else if (index === 3) { //對(duì)價(jià)格做處理：保留兩位小數(shù)
						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] = this.$utils.formSum(sums[index], 2, '.', ',');
						} else {
							sums[index] = '/';
						}
					} else if (index === 4) { //對(duì)利潤(rùn)率做處理：保留兩位小數(shù)
						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] = sums[index].toFixed(2);
							sums[index] += ' %';
						} else {
							sums[index] = '/';
						}
					} else {
						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);
						} else {
							sums[index] = '/';
						}
					}
				});
				return sums;
			}
		}
	};
</script>

到此，關(guān)于“vue表格計(jì)算總計(jì)的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手