elementUI table加總計(jì)

直接上代碼


<template>
    <section>
      <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
              <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>
    </section>
</template>

<script>

export default {
  name: 'meTest',
  components: { },
  data() {
    return {
      tableData6: [{
        name: '王小虎',
        type: 0,
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        name: '王小虎',
        type: 0,
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        name: '王小虎',
        type: 0,
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        name: '王小虎',
        type: 0,
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        name: '王小虎總計(jì)',
        type: 1,
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      },{
        name: '王小虎1',
        type: 0,
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        name: '王小虎1',
        type: 0,
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        name: '王小虎1',
        type: 0,
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        name: '王小虎1',
        type: 0,
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        name: '王小虎1總計(jì)',
        type: 1,
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }, {
        name: '王小虎2',
        type: 0,
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        name: '王小虎2',
        type: 0,
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }, {
        name: '王小虎3',
        type: 0,
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }, {
        name: '王小虎4',
        type: 0,
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }],
      arr1:[]
    }
  },
  created() {
    this.setdates(this.tableData6)
  },
  methods: {
    setdates(arr) {
      var obj = {},
          k, arr1 = [];
      for(var i = 0, len = arr.length; i < len; i++) {
          k = arr[i].name;
          if(obj[k])
              obj[k]++;
          else
              obj[k] = 1;
      }
      console.log(obj)
      //保存結(jié)果{el-'元素'间唉,count-出現(xiàn)次數(shù)}
      for(var o in obj) {
          for(let i=0;i<obj[o];i++){
              if(i===0){
                this.arr1.push(obj[o])
            }else{
                this.arr1.push(0)
            }
          }
      }
      
      console.log(this.arr1);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 && this.tableData6[rowIndex].type == 0) {
            let _row = this.arr1[rowIndex]
          let _col = this.arr1[rowIndex] > 0 ? 1 : 0
            return {
              rowspan: _row,
              colspan: _col
            };
        }else if(columnIndex === 0 && this.tableData6[rowIndex].type == 1){
                return {
              rowspan: 1,
              colspan:2
            };
        }else if(columnIndex === 1 && this.tableData6[rowIndex].type == 1){
                return {
              rowspan: 0,
              colspan: 0
            };
        }
    }
  }
}
</script>

<style lang="less">
</style>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末糊余,一起剝皮案震驚了整個(gè)濱河市溃列,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌镀娶,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件廷没,死亡現(xiàn)場(chǎng)離奇詭異朝氓,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)休讳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門讲婚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人俊柔,你說我怎么就攤上這事筹麸。” “怎么了雏婶?”我有些...
    開封第一講書人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵物赶,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我留晚,道長(zhǎng)酵紫,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任倔丈,我火速辦了婚禮憨闰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘需五。我一直安慰自己鹉动,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開白布宏邮。 她就那樣靜靜地躺著泽示,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蜜氨。 梳的紋絲不亂的頭發(fā)上械筛,一...
    開封第一講書人閱讀 50,084評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音飒炎,去河邊找鬼埋哟。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的赤赊。 我是一名探鬼主播闯狱,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼抛计!你這毒婦竟也來了哄孤?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤吹截,失蹤者是張志新(化名)和其女友劉穎瘦陈,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體波俄,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡晨逝,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了弟断。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咏花。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖阀趴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情苍匆,我是刑警寧澤刘急,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布,位于F島的核電站浸踩,受9級(jí)特大地震影響叔汁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜检碗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一据块、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧折剃,春花似錦另假、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至奏甫,卻和暖如春戈轿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背阵子。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來泰國(guó)打工思杯, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人挠进。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓色乾,卻偏偏與公主長(zhǎng)得像腾么,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子杈湾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351