Vue使用ElemenUI對table的指定列進行合算的方法
前言
最近有一個想法,就是記錄自己花銷的時候,table中有一項內(nèi)容是花銷的金額。然后想在table的底部有一項內(nèi)容是該金額的總計。
然后我就順著elemetui的table組件尋找相關(guān)的demo,還真發(fā)現(xiàn)了一個這樣的demo。
對于這個demo,官方是這么描述的:
將show-summary設(shè)置為true就會在表格尾部展示合計行。默認情況下,對于合計行,第一列不進行數(shù)據(jù)求合操作,而是顯示「合計」二字(可通過sum-text配置),其余列會將本列所有數(shù)值進行求合操作,并顯示出來。當然,你也可以定義自己的合計邏輯。使用summary-method并傳入一個方法,返回一個數(shù)組,這個數(shù)組中的各項就會顯示在合計行的各列中,具體可以參考本例中的第二個表格。
通過描述可以發(fā)現(xiàn)幾個要點:
1.可以通過show-summary開啟在表格尾部展示合計行,默認是false,改成true即可開啟,第一列不進行數(shù)據(jù)求合操作。
2.尾部合計的文案默認是合計,可以通過sum-text自定義修改
3.可以通過summary-method編寫一個函數(shù),自定義合計的邏輯
官方的原生代碼如下:
<template> <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" sortable label="數(shù)值 1"> </el-table-column> <el-table-column prop="amount2" sortable label="數(shù)值 2"> </el-table-column> <el-table-column prop="amount3" sortable label="數(shù)值 3"> </el-table-column> </el-table> <el-table :data="tableData" border height="200" :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 prop="amount1" label="數(shù)值 1(元)"> </el-table-column> <el-table-column prop="amount2" label="數(shù)值 2(元)"> </el-table-column> <el-table-column prop="amount3" label="數(shù)值 3(元)"> </el-table-column> </el-table> </template> <script> export default { 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 }] }; }, 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; } } }; </script>
接下來就改造下代碼,根據(jù)自己的需求去修改對應(yīng)的邏輯。
show-summary合計項初始化
首先把相關(guān)的代碼加上,初始化就是這樣的一個效果
sum-tex修改文案
但是默認的文案是合計,有時候我們可能需要根據(jù)自己的場景進行修改
這時候就可以使用sum-tex屬性進行修改了,比如我這里修改:
sum-text="總共消費
效果馬上就來
但是這時候還有一個問題,我只想要消費金額這一列進行匯總,但是現(xiàn)在的情況是把table全部的列都匯總了。甚至把我的字典值都匯總了。。。
這顯然不符合我的需求,這時候就可以使用自定義函數(shù)了。
summary-method自定義函數(shù)
和前面兩個屬性一樣,直接加在table中即可。由于它的值是一個函數(shù),所以寫法和前兩位略有不同。
我們也可以再這個函數(shù)里面通過 sums[index] 去定義總價的文案,如果sum-text和函數(shù)里面定義的 sums[index] 有沖突,會以函數(shù)中的 sums[index] 文案為主
這時候的效果是這樣的。
自定義總計列 單個列
如果我們只想要對某一列進行總計,那么可以借助column的property屬性:
可以發(fā)現(xiàn)其實就是全部的屬性名稱,那么我們就可以根據(jù)它判斷,實現(xiàn)自定義核算了
比如這里我想要核算amount這一列的值:
多個列
如果哪天又加了一個需求,需要再算一個列,這時候在判斷里面加上這個條件即可。使用|| 拼接該列
比如這里我又要合算remark這一列。就可以這么寫:
相關(guān)代碼如下:
<el-table :data="moneyTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" highlight-current-row border stripe fit show-summary sum-text="總共消費" :summary-method="getSummaries" > // 對列進行合算 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])); // 只對amount這一列進行總計核算。 if (column.property === 'amount') { 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] = '---' } } }); return sums; },
總結(jié)
ElemenUI對這個demo封裝的特別好,我們直接拿來用修改下自己的邏輯即可。
到此這篇關(guān)于Vue使用ElemenUI對table的指定列進行合算的文章就介紹到這了,更多相關(guān)Vuetable的指定列合算內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實現(xiàn)錄音功能js-audio-recorder帶波浪圖效果的示例
這篇文章主要介紹了vue實現(xiàn)錄音功能js-audio-recorder帶波浪圖效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08vue/cli?配置動態(tài)代理無需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架,用于自動生成vue.js+webpack的項目模板,分為vue?init?webpack-simple?項目名和vue?init?webpack?項目名兩種,這篇文章主要介紹了vue/cli?配置動態(tài)代理,無需重啟服務(wù),需要的朋友可以參考下2022-05-05vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù),結(jié)合實例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關(guān)操作技巧,需要的朋友可以參考下2019-08-08vue項目中做編輯功能傳遞數(shù)據(jù)時遇到問題的解決方法
這篇文章主要介紹了vue項目中做編輯功能傳遞數(shù)據(jù)時遇到問題的解決方法,vue父組件向子組件傳遞數(shù)據(jù)的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Vue2.x中利用@font-size引入字體圖標報錯的解決方法
今天小編就為大家分享一篇Vue2.x中利用@font-size引入字體圖標報錯的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09