最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue?element-ui動(dòng)態(tài)橫向統(tǒng)計(jì)表格的實(shí)現(xiàn)

 更新時(shí)間:2022年08月01日 08:52:44   作者:qq_42289686  
這篇文章主要介紹了vue?element-ui動(dòng)態(tài)橫向統(tǒng)計(jì)表格的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element-ui動(dòng)態(tài)橫向統(tǒng)計(jì)表格

表格結(jié)構(gòu)

<el-table
      :data="AllData"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="統(tǒng)計(jì)">
      </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="合計(jì)">
      </el-table-column>
    </el-table>

data

AllData:[],
allList:[],

methods:

setData(){
        //這里請(qǐng)求后臺(tái)的統(tǒng)計(jì)信息,合計(jì)可以在我這里進(jìn)行運(yùn)算
        var getData = [
          {
            title:'未入賬',
            data:[
              {
                feeName:'考試費(fèi)1',
                num:2001,
              },
              {
                feeName:'考試費(fèi)2',
                num:2002,
              },
              {
                feeName:'考試費(fèi)3',
                num:2003,
              },
              {
                feeName:'考試費(fèi)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
        }
      },

請(qǐng)求到 getData這個(gè)json之后就組建新的對(duì)象

created(){
      this.setData()
    },

最后上效果圖…

附:

如果增加下面圖中json對(duì)象的對(duì)應(yīng)數(shù)據(jù),表格可以橫軸縱軸增加數(shù)據(jù)

關(guān)于element-ui表格問(wèn)題

表格圖片顯示問(wèn)題

問(wèn)題:

表格中是用戶(hù)信息,有用戶(hù)頭像,用戶(hù)頭像圖片沒(méi)顯示,當(dāng)兩個(gè)用戶(hù)頭像地址一樣,前一頁(yè)還顯示,下一頁(yè)就沒(méi)有了

環(huán)境:

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

解決:

原因1:el-avatar組件內(nèi)有一個(gè)isImageExist,默認(rèn)情況下圖片請(qǐng)求失敗會(huì)把它設(shè)置為false,一旦設(shè)置為false,就不會(huì)再變成true,此時(shí)修改圖片為正確地址也不會(huì)渲染圖片。

原因2:el-table表格更新,默認(rèn)是會(huì)只更新變化部分,盡量減少dom操作。

因此一旦有圖片請(qǐng)求失敗,就很有可能導(dǎo)致原來(lái)有頭像的用戶(hù)顯示不出來(lái),解決辦法是給el-table增加屬性row-key=“id”,這樣表格就會(huì)更新所有行的dom。

表格中多出一條線(xiàn)

問(wèn)題:

表格中設(shè)置了最后一列固定右側(cè),當(dāng)縮放瀏覽器讓表格產(chǎn)生橫向滾動(dòng)條,然后縮放到表格沒(méi)有橫向滾動(dòng)條,此時(shí)多出一條線(xiàn)

環(huán)境:

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

解決:

el-table中.el-table__fixed元素產(chǎn)生的線(xiàn),當(dāng)表格出現(xiàn)橫向滾動(dòng)條時(shí),.el-table__fixed元素的高度會(huì)減去滾動(dòng)條的寬度gutterWidth,但是縮放到不顯示滾動(dòng)條時(shí).el-table__fixed元素高度并不會(huì)再加上gutterWidth,這樣導(dǎo)致表格多出一條線(xiàn)。

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

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

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • uniapp 拖拽圖片排序功能實(shí)現(xiàn) 類(lèi)似于微信朋友圈效果

    uniapp 拖拽圖片排序功能實(shí)現(xiàn) 類(lèi)似于微信朋友圈效果

    這篇文章主要介紹了uniapp 拖拽圖片排序功能實(shí)現(xiàn)類(lèi)似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,圖片數(shù)組的插入排序,另一部分是上傳加號(hào)圖片的?定位? 動(dòng)態(tài)計(jì)算分為幾列,每一個(gè)圖片大小的位置?絕對(duì)定位的計(jì)算,需要的朋友可以參考下
    2024-07-07
  • Vue中關(guān)于重新渲染組件的方法及總結(jié)

    Vue中關(guān)于重新渲染組件的方法及總結(jié)

    這篇文章主要介紹了Vue中關(guān)于重新渲染組件的方法及總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 淺談Vue.nextTick 的實(shí)現(xiàn)方法

    淺談Vue.nextTick 的實(shí)現(xiàn)方法

    本篇文章主要介紹了Vue.nextTick 的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • VUE中setTimeout和setInterval自動(dòng)銷(xiāo)毀案例

    VUE中setTimeout和setInterval自動(dòng)銷(xiāo)毀案例

    這篇文章主要介紹了VUE中setTimeout和setInterval自動(dòng)銷(xiāo)毀案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • Vue 父子組件、組件間通信

    Vue 父子組件、組件間通信

    本篇文章主要介紹了Vue 父子組件、組件間通信示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-03-03
  • Vue的實(shí)例、生命周期與Vue腳手架(vue-cli)實(shí)例詳解

    Vue的實(shí)例、生命周期與Vue腳手架(vue-cli)實(shí)例詳解

    本文通過(guò)實(shí)例代碼+圖片描述的形式給大家介紹了Vue的實(shí)例、生命周期與Vue腳手架(vue-cli)知識(shí),需要的朋友可以參考下
    2017-12-12
  • Vue中代碼傳送(teleport)的實(shí)現(xiàn)

    Vue中代碼傳送(teleport)的實(shí)現(xiàn)

    本文主要介紹了Vue中代碼傳送(teleport)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 淺析Vue中method與computed的區(qū)別

    淺析Vue中method與computed的區(qū)別

    在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼,但是什么時(shí)候用哪個(gè)屬性,要好好區(qū)分一下才能做到正確的運(yùn)用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下
    2018-03-03
  • Vue header組件開(kāi)發(fā)詳解

    Vue header組件開(kāi)發(fā)詳解

    本篇文章主要介紹了Vue header組件開(kāi)發(fā)詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • vue 實(shí)現(xiàn)圖片懶加載功能

    vue 實(shí)現(xiàn)圖片懶加載功能

    這篇文章主要介紹了vue 實(shí)現(xiàn)圖片懶加載功能的方法,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-12-12

最新評(píng)論

望江县| 萨嘎县| 鹿邑县| 平舆县| 乌拉特中旗| 常德市| 芜湖县| 枞阳县| 公主岭市| 霞浦县| 定日县| 文安县| 辽源市| 海淀区| 井陉县| 察隅县| 丰顺县| 日喀则市| 凌云县| 泸水县| 资中县| 栾川县| 库尔勒市| 内乡县| 简阳市| 青河县| 榆林市| 台东市| 威宁| 缙云县| 周至县| 兰坪| 五家渠市| 浦城县| 都江堰市| 共和县| 贞丰县| 天柱县| 昌宁县| 西乌珠穆沁旗| 西华县|