vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法

行列轉(zhuǎn)換是一個(gè)老生常談的問題，這幾天逛知乎有遇到了這個(gè)問題。一個(gè)前端說，拿到的數(shù)據(jù)是單列的需要做轉(zhuǎn)換才能夠綁定，折騰了好久才搞定，還說這個(gè)應(yīng)該后端直接出數(shù)據(jù)，不應(yīng)該讓前端折騰。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了馬邊彝族免費(fèi)建站歡迎大家使用！

這個(gè)嘛，行列轉(zhuǎn)換在后端也不是很好解決的問題，而且還有一個(gè)性能的問題，綜合考慮，我還是覺得應(yīng)該由前端進(jìn)行行列轉(zhuǎn)換。光說不練假把式，所以拿出來代碼僅作為拋磚引玉，供大家參考一下，如果有更好的方法，歡迎一起來探討。

1、模板設(shè)計(jì)。

 <div id="app">
   <table class="table_default1" >
     <tr>
       <th v-for="item in tableHeader">
         {{item}} 
       </th>
     </tr>
     <tr v-for="tr in tableBody">
       <td v-for="td in tr">
         {{td}}
       </td>
     </tr>
   </table>
 </div>

這個(gè)比較簡(jiǎn)單，先遍歷 tableHeader    把表頭循環(huán)出來。

然后在雙重遍歷，tableBody 提供行數(shù)據(jù)，然后在遍歷出來td。

這里沒有任何與業(yè)務(wù)邏輯相關(guān)的代碼，也就是說這個(gè)模板可以適合任何行列轉(zhuǎn)換的需求?？梢越壎ǔ鰜?m行n列  的表格。

2、然后是vue實(shí)例部分 

 var form = new Vue({
     el: "#app",
     data: {
       tableHeader: { }, //綁定表頭
       tableBody: { } //綁定數(shù)據(jù)
     },
     created: function () {
       //代碼在下面
     }
   });

這里data的兩個(gè)成員都是空的，因?yàn)槠浣Y(jié)構(gòu)要根據(jù)后臺(tái)傳遞過來的數(shù)據(jù)決定，所以這里就不寫了，當(dāng)然 tableHeader 和 tableBody 還是要先寫一下占個(gè)位置，否則模板的地方就沒法寫了。

不過還是先寫一個(gè)結(jié)構(gòu)參考一下，否則下面的代碼估計(jì)看著會(huì)比較暈

2.1  tableHeader  的結(jié)構(gòu)。這個(gè)很簡(jiǎn)單了。

 {
   name: "姓名",
   studentID: "學(xué)號(hào)",
   "數(shù)學(xué)": "數(shù)學(xué)",
   "物理": "物理",
   "英語": "英語",
   "語文": "語文",
 }

2.2  tableBody  的結(jié)構(gòu)。這里并沒有使用數(shù)組，因?yàn)閿?shù)組不好定位，用key的方式可以很方便的定位，key值的規(guī)律就是 標(biāo)識(shí) + 學(xué)號(hào)，比如s1。純數(shù)字作為key，可能會(huì)有點(diǎn)問題，所以就加了個(gè)標(biāo)識(shí)。

對(duì)了，可以多一個(gè)科目的，比如“物理”，只要tableHeader里面有就可以。

{
  s1: {
    studentID: 1,
    name: "小紅", 
    數(shù)學(xué): 200,
    語文: 190,
    英語: 191
  }
  s2: {
    studentID: 2, 
    name: "小明", 
    數(shù)學(xué): 193, 
    語文: 187,
    英語: 188,
    物理: 99
  }
  s3: {
    studentID: 3, 
    name: "韓梅梅", 
    數(shù)學(xué): 194, 
    語文: 199, 
    英語: 198
  }
}

3、最后是轉(zhuǎn)換函數(shù)

//得到測(cè)試數(shù)據(jù)
       var testdata = [
         {
           studentID: 0001,
           name: '小紅',
           subject: '數(shù)學(xué)',
           mark: 100
         }, {
           studentID: 0001,
           name: '小紅',
           subject: '語文',
           mark: 90
         }, {
           studentID: 0001,
           name: '小紅',
           subject: '英語',
           mark: 91
         }, {
           studentID: 0002,
           name: '小明',
           subject: '數(shù)學(xué)',
           mark: 93
         }, {
           studentID: 0002,
           name: '小明',
           subject: '語文',
           mark: 87
         }, {
           studentID: 0002,
           name: '小明',
           subject: '英語',
           mark: 88
         }, {
           studentID: 0002,
           name: '小明',
           subject: '物理',
           mark: 88
         }, {
           studentID: 0003,
           name: '韓梅梅',
           subject: '數(shù)學(xué)',
           mark: 94
         }, {
           studentID: 0003,
           name: '韓梅梅',
           subject: '語文',
           mark: 99
         }, {
           studentID: 0003,
           name: '韓梅梅',
           subject: '英語',
           mark: 98
         }
       ];
       //第一次遍歷，制作 tableHeader
       var th = {}
       th["studentID"] = '學(xué)號(hào)'; //固定列
       th["name"] = '姓名';
       //篩選科目
       var thKey = {}
       for (var i = 0; i < testdata.length; i++) {
         thKey[testdata[i].subject] = 1; //動(dòng)態(tài)列
       }
       //把科目加到th里面 ，動(dòng)態(tài)增加列
       for (var key in thKey) {
         th[key] = key;
       }
       this.tableHeader = th;
       //第二次遍歷，制作tr的行
       var tr = {};
       for (var i = 0; i < testdata.length; i++) {
         var d = testdata[i];
         tr['s' + d.studentID] = {
           studentID: d.studentID, //固定列
           name: d.name
         }
       }
       //第三次遍歷，添加科目的成績(jī)
       for (var i = 0; i < testdata.length; i++) {
         var d = testdata[i];
         tr['s' + d.studentID][d.subject] = d.mark + 100; //動(dòng)態(tài)列
       }
       this.tableBody = tr;

這個(gè)可以寫在 created 里面，當(dāng)然寫在其他地方也可以，只要把數(shù)據(jù)給過去就行。

前面是給了一個(gè)測(cè)試數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)并不僅限于這樣，改成其他的業(yè)務(wù)也是可以的，只需要知道 studentID 是一個(gè)標(biāo)識(shí)列，確定有多少行。 name 是附帶的，有沒有都行，因?yàn)橛锌赡苤孛圆荒苡胣ame做標(biāo)識(shí)，要用學(xué)號(hào)。

subject 是負(fù)責(zé)確定要增加多少列的，值相同的放到一列，不同的另起一列。

mark 是每一行的分?jǐn)?shù)，和 subject 是key value的關(guān)系，subject 是key， Mark是value，只不過這個(gè)變成了上下關(guān)系。subject在表頭，Mark在body里面。

自我感覺注釋寫的還算可以的。如果有看不明白的，歡迎討論。

最后效果圖一張

vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

當(dāng)前文章：vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法
當(dāng)前網(wǎng)址：http://bm7419.com/article36/gocspg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、服務(wù)器托管、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名