vue element-ui動態橫向統計表格的實現

element-ui動態橫向統計表格

表格結構

<el-table
      :data="AllData"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="統計">
      </el-table-column>
      <el-table-column
        v-for="(item,index) in allList"
        :prop="item.key"
        :key="index"
        :label="item.feeName">
      </el-table-column>
      <el-table-column
        prop="join"
        label="合計">
      </el-table-column>
    </el-table>

data

AllData:[],
allList:[],

methods:

setData(){
        //這裡請求後臺的統計信息,合計可以在我這裡進行運算
        var getData = [
          {
            title:'未入賬',
            data:[
              {
                feeName:'考試費1',
                num:2001,
              },
              {
                feeName:'考試費2',
                num:2002,
              },
              {
                feeName:'考試費3',
                num:2003,
              },
              {
                feeName:'考試費4',
                num:2004,
              }
            ]
          }
        ]
        for (var i in getData){
          var a = {}
          var b = []
          a['title'] = getData[i].title
          var x = 0
          var join = 0
          getData[i].data.forEach(function (e){
            x+=1
            join+=e.num
            b.push({feeName:e.feeName,key:'num'+x})
            a['num'+x] =  e.num
            a['join'] = join
          })
          this.AllData.push(a)
          this.allList = b
        }
      },

請求到 getData這個json之後就組建新的對象

created(){
      this.setData()
    },

最後上效果圖…

附:

如果增加下面圖中json對象的對應數據,表格可以橫軸縱軸增加數據

關於element-ui表格問題

表格圖片顯示問題

問題:

表格中是用戶信息,有用戶頭像,用戶頭像圖片沒顯示,當兩個用戶頭像地址一樣,前一頁還顯示,下一頁就沒有瞭

環境:

  • elementUI2.10.1組件el-table el-avatar
  • vue2.6.10

解決:

原因1:el-avatar組件內有一個isImageExist,默認情況下圖片請求失敗會把它設置為false,一旦設置為false,就不會再變成true,此時修改圖片為正確地址也不會渲染圖片。

原因2:el-table表格更新,默認是會隻更新變化部分,盡量減少dom操作。

因此一旦有圖片請求失敗,就很有可能導致原來有頭像的用戶顯示不出來,解決辦法是給el-table增加屬性row-key=“id”,這樣表格就會更新所有行的dom。

表格中多出一條線

問題:

表格中設置瞭最後一列固定右側,當縮放瀏覽器讓表格產生橫向滾動條,然後縮放到表格沒有橫向滾動條,此時多出一條線

環境:

  • elementUI2.10.1組件el-table
  • vue2.6.10

解決:

el-table中.el-table__fixed元素產生的線,當表格出現橫向滾動條時,.el-table__fixed元素的高度會減去滾動條的寬度gutterWidth,但是縮放到不顯示滾動條時.el-table__fixed元素高度並不會再加上gutterWidth,這樣導致表格多出一條線。

所以問題就是要覆蓋掉元素錯誤的高度樣式,為瞭避免影響過多,可以在選擇器上面加一些其他限制,下面的不做限制。

.el-table__fixed-right{
    height: 100% !important;
}

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: