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。
推薦閱讀:
- element 表格多級表頭子列固定的實現
- vue+element table表格實現動態列篩選的示例代碼
- elementUi 中table表尾插入行的實例
- Vue中Element的table多選表格如何實現單選
- vue.js基於ElementUI封裝瞭CRUD的彈框組件