Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼

更新時(shí)間：2023年12月01日 10:32:25 作者：覺(jué)醒法師

Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作,本文給大家介紹Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼,感興趣的朋友一起看看吧

一、安裝element-ui

使用npm進(jìn)行安裝：

npm i element-ui -S

二、表頭實(shí)現(xiàn)

這里表頭實(shí)現(xiàn)比較簡(jiǎn)單，代碼如下：

<template>
  <div>
    <el-table :data="tableStudentData" :span-method="reconstructionStuCell" style="width: 100%">
      <el-table-column type="index" label="序號(hào)" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column label="科目信息">
        <el-table-column prop="courseName" label="科目" width="80"></el-table-column>
        <el-table-column prop="date" label="日期" width="80"></el-table-column>
        <el-table-column prop="timeStr" label="考試時(shí)間" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="成績(jī)信息">
        <el-table-column prop="score" label="成績(jī)" width="60"></el-table-column>
        <el-table-column prop="scoreTotal" label="總分" width="60"></el-table-column>
        <el-table-column prop="total" label="滿分" width="60"></el-table-column>
        <el-table-column prop="totalAll" label="滿分總分" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.totalAll">{{scope.row.totalAll}} （及格率：{{parseInt(scope.row.scoreTotal/scope.row.totalAll*100)}}%）</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        tableData: [],
        tableStudentData: []
      }
    },
    created() {
    },
    methods: {
      /**
       * 合并單元格數(shù)據(jù)
       */
      reconstructionStuCell({ row, column, rowIndex, columnIndex }){
      }
      //end
    }
  }
</script>
<style lang="scss">
</style>

此時(shí)表頭效果已形成，如下圖：

三、數(shù)據(jù)渲染

數(shù)據(jù)渲染這里較為復(fù)雜，這里為方便大家理解，進(jìn)行逐步拆解敘述。如有更好方法，也歡迎大家指點(diǎn)。

3.1 模擬數(shù)據(jù)

如上圖，在element-table目錄中，新建data.js文件，用于存儲(chǔ)模擬數(shù)據(jù)，代碼如下：

export const studentData = [
  {name: "李四", subject: [
    {courseName: "語(yǔ)文", date: "20日", timeStr: "09:00~11:30", score: 90, total: 150},
    {courseName: "政治", date: "20日", timeStr: "14:30~16:30", score: 70, total: 100},
    {courseName: "數(shù)學(xué)", date: "21日", timeStr: "09:00~11:30", score: 100, total: 150},
    {courseName: "歷史", date: "21日", timeStr: "14:30~16:30", score: 72, total: 100},
    {courseName: "英語(yǔ)", date: "22日", timeStr: "09:00~11:30", score: 95, total: 150},
  ]},
  {name: "王五", subject: [
    {courseName: "語(yǔ)文", date: "20日", timeStr: "09:00~11:30", score: 85, total: 150},
    {courseName: "政治", date: "20日", timeStr: "14:30~16:30", score: 60, total: 100},
    {courseName: "數(shù)學(xué)", date: "21日", timeStr: "09:00~11:30", score: 90, total: 150},
    {courseName: "歷史", date: "21日", timeStr: "14:30~16:30", score: 68, total: 100},
    {courseName: "英語(yǔ)", date: "22日", timeStr: "09:00~11:30", score: 75, total: 150},
  ]},
  {name: "小美", subject: [
    {courseName: "語(yǔ)文", date: "20日", timeStr: "09:00~11:30", score: 120, total: 150},
    {courseName: "政治", date: "20日", timeStr: "14:30~16:30", score: 85, total: 100},
    {courseName: "數(shù)學(xué)", date: "21日", timeStr: "09:00~11:30", score: 120, total: 150},
    {courseName: "歷史", date: "21日", timeStr: "14:30~16:30", score: 80, total: 100},
    {courseName: "英語(yǔ)", date: "22日", timeStr: "09:00~11:30", score: 130, total: 150},
  ]}
];

頁(yè)面中引入模擬數(shù)據(jù)，并賦值給表格的變量，代碼如下：

<script>
  import { studentData } from './data.js'
  export default {
    data(){
      return {
        tableStudentData: studentData
      }
    },
    created() { },
    methods: {
      /**
       * 合并單元格數(shù)據(jù)
       */
      reconstructionStuCell({ row, column, rowIndex, columnIndex }){
      }
      //end
    }
  }
</script>

此時(shí)表格中可以正常渲染出部分?jǐn)?shù)據(jù)了，效果圖如下：

3.2 數(shù)據(jù)處理

如上圖會(huì)發(fā)現(xiàn)，科目和成績(jī)相關(guān)信息，未顯示出來(lái)。這里需要對(duì)數(shù)據(jù)進(jìn)行處理下，將所有科目信息調(diào)整到和姓名字段為同一行數(shù)據(jù)中。需要做以下幾步：

將subject二級(jí)數(shù)據(jù)全部移至name同級(jí)的同一行數(shù)據(jù)中。
將name字段原數(shù)據(jù)移至subject的第一行數(shù)據(jù)中；item和sub進(jìn)行合并。
無(wú)subject子項(xiàng)數(shù)據(jù)的，保持原數(shù)據(jù)輸出。

在data.js中，添加重構(gòu)數(shù)據(jù)reconstructionStuData()函數(shù)，代碼如下：

/**
 * 重構(gòu)學(xué)生數(shù)據(jù) 并返回
 */
export const reconstructionStuData = data => {
  if(!Array.isArray(data)) return [];
  let tmpData = [];
  data.forEach((item, i) => {
    //有二級(jí)數(shù)據(jù)的進(jìn)行處理
    if(Array.isArray(item.subject)&&item.subject.length>0){
      //循環(huán)成績(jī)
      item.subject.forEach((sub, j) => {
        let subData = {};
        if(j==0){
          //子項(xiàng)第一行數(shù)據(jù)，和姓名信息同行
          subData = Object.assign({ }, item, sub);
        }
        //其他行數(shù)據(jù)無(wú)須添加 姓名字段信息（第一行數(shù)據(jù)會(huì)合并到結(jié)束位置，填充后也會(huì)被覆蓋）
        else{
          subData = Object.assign({ }, sub);
        }
        //if end
        tmpData.push( subData );
      });
    }
    //subject無(wú)子項(xiàng)數(shù)據(jù)，保留當(dāng)前位置輸出
    else{
      tmpData.push(
        Object.assign({ }, item)
      );
    }
  });
  return tmpData;
}

引入reconstructionStuData()函數(shù)，代碼如下：

<script>
  import { reconstructionStuData, studentData } from './data.js'
  export default {
    data(){
      return {
        tableStudentData: studentData
      }
    },
    created() {
      this.tableStudentData = reconstructionStuData(studentData);
    },
    methods: {
      /**
       * 合并單元格數(shù)據(jù)
       */
      reconstructionStuCell({ row, column, rowIndex, columnIndex }){
      }
      //end
    }
  }
</script>

此時(shí)表格效果圖如下：

3.4 圖解

如上圖，

列（姓名）位于列的第1位置（起始從0開始，所以序號(hào)為第0位置），往下合并subject數(shù)組長(zhǎng)度位置即可。
列（總分）位于列的第6位置，往下合并subject數(shù)組長(zhǎng)度位置即可。
列（滿分總分）位于列的第8位置，往下合并subject數(shù)組長(zhǎng)度位置即可。

這是我們會(huì)發(fā)現(xiàn)，methods中定義的reconstructionStuCell()函數(shù)還未使用，通過(guò)給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對(duì)象，里面包含當(dāng)前行row、當(dāng)前列column、當(dāng)前行號(hào)rowIndex、當(dāng)前列號(hào)columnIndex四個(gè)屬性。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表rowspan，第二個(gè)元素代表colspan。也可以返回一個(gè)鍵名為rowspan和colspan的對(duì)象。

span-method相當(dāng)于從數(shù)據(jù)單元格第一行開始，每行每列開始循環(huán)執(zhí)行，想當(dāng)于 9 * 15 執(zhí)行135次，通過(guò)函數(shù)中 rowIndex, columnIndex字段進(jìn)行判斷當(dāng)前循環(huán)是哪行哪列，并作對(duì)應(yīng)處理。

這里我們添加以下邏輯，在每行數(shù)據(jù)中添加姓名、總分，滿分總分對(duì)應(yīng)columnIndex1、columnIndex6、columnIndex8字段，用來(lái)存儲(chǔ)需要返回的colspan和rowspan數(shù)據(jù)，代碼如下：

reconstructionStuCell({ row, column, rowIndex, columnIndex }){
    let column1Data = row['columnIndex1'];
    let column6Data = row['columnIndex6'];
    let column8Data = row['columnIndex8'];
    //判斷條件滿足情況下，返回對(duì)應(yīng)的rowspan和colspan數(shù)據(jù)
    if(
      (column1Data&&column1Data.columnIndex==columnIndex) ||      //姓名組合并
      (column6Data&&column6Data.columnIndex==columnIndex) ||      //總分組合并
      column8Data&&column8Data.columnIndex==columnIndex           //滿分總分組合并
    ){
      return row['columnIndex'+columnIndex];
    }
    //if end
  }

比如執(zhí)行span-method方法時(shí)，此時(shí)獲取row數(shù)據(jù)中columnIndex1，columnIndex1中的columnIndex值為1，與span-method方法中columnIndex進(jìn)行對(duì)比。
1、此時(shí)每行中列1都會(huì)被匹配到，列1行1返回{colspan: 1, rowspan: 5}，則往下合并5個(gè)單元格；
2、列1行2返回{colspan: 0, rowspan: 0}，則單元格不渲染，否則此行多一個(gè)單元格會(huì)錯(cuò)位；
3、列1行3，列1行4...... 同理。

列6（總分）、列8（滿分總分）同理，通過(guò)columnIndex6和columnIndex8進(jìn)行判斷，進(jìn)行單元格合并。

以上代碼添加后，發(fā)現(xiàn)表格并無(wú)任何變化，這是因?yàn)橹貥?gòu)數(shù)據(jù)函數(shù)中，還未添加對(duì)應(yīng)的columnIndex1、columnIndex6、columnIndex8字段。

3.5 合并列 - 姓名

首先，我們來(lái)合并（姓名）這列數(shù)據(jù)，將每行數(shù)據(jù)中添加columnIndex1，子屬性變量columnIndex表示合并對(duì)應(yīng)的列位置。

subject有子項(xiàng)數(shù)據(jù)除第一行數(shù)據(jù)，后面所有rowspan和colspan為0，第1個(gè)單元往下合并后，會(huì)填充其他行空缺位置。

subject無(wú)子項(xiàng)數(shù)據(jù)rowspan和colspan為1，保留原位置渲染。如為0則當(dāng)前單元格不被渲染，表格會(huì)錯(cuò)亂。

代碼如下：

export const reconstructionStuData = data => {
  if(!Array.isArray(data)) return [];
  let tmpData = [];
  data.forEach((item, i) => {
    //有二級(jí)數(shù)據(jù)的進(jìn)行處理
    if(Array.isArray(item.subject)&&item.subject.length>0){
      //循環(huán)成績(jī)
      item.subject.forEach((sub, j) => {
        let subData = {};
        if(j==0){
          //子項(xiàng)第一行數(shù)據(jù)，和姓名信息同行
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: item.subject.length, colspan: 1 } }, item, sub);
        }
        //其他行數(shù)據(jù)無(wú)須添加 姓名字段信息（第一行數(shù)據(jù)會(huì)合并到結(jié)束位置，填充后也會(huì)被覆蓋）
        else{
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 0, colspan: 0 } }, sub);
        }
        //if end
        tmpData.push( subData );
      });
    }
    //無(wú)子項(xiàng)數(shù)據(jù)，保留當(dāng)前位置輸出
    else{
      tmpData.push(
        Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 1, colspan: 1 } }, item)
      );
    }
  });
  return tmpData;
}

此時(shí)大家看到表格的（姓名）列，已合并到對(duì)應(yīng)長(zhǎng)度，效果圖如下：

3.6 合并列 - 總分和滿分總分

總分和滿分總分合并部分，和（姓名）列同理，但多出一步則需計(jì)算出對(duì)應(yīng)科目的總分和所有科目的滿分總分。

增加第6列和第8列合并數(shù)據(jù)columnIndex6和columnIndex8，并新增scoreTotal和totalAll分別保存總分和滿分總分結(jié)果。

代碼如下：

export const reconstructionStuData = data => {
  if(!Array.isArray(data)) return [];
  let tmpData = [];
  data.forEach((item, i) => {
    //有二級(jí)數(shù)據(jù)的進(jìn)行處理
    if(Array.isArray(item.subject)&&item.subject.length>0){
      //循環(huán)成績(jī)
      item.subject.forEach((sub, j) => {
        let subData = {};
        if(j==0){
          //子項(xiàng)第一行數(shù)據(jù)，和姓名信息同行
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: item.subject.length, colspan: 1 } }, item, sub);
          //計(jì)算總分
          subData['scoreTotal'] = item.subject.reduce((total, value) => {
            return total + value.score;
          }, 0);
          subData['columnIndex6'] = { columnIndex: 6, rowspan: item.subject.length, colspan: 1 };
          //計(jì)算滿分總分
          subData['totalAll'] = item.subject.reduce((total, value) => {
            return total + value.total;
          }, 0);
          subData['columnIndex8'] = { columnIndex: 8, rowspan: item.subject.length, colspan: 1 };
        }
        //其他行數(shù)據(jù)無(wú)須添加 姓名字段信息（第一行數(shù)據(jù)會(huì)合并到結(jié)束位置，填充后也會(huì)被覆蓋）
        else{
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 0, colspan: 0 } }, sub);
          //總分和滿分總分 被合并部分單元格填寫為0
          subData['columnIndex6'] = { columnIndex: 6, rowspan: 0, colspan: 0 };
          subData['columnIndex8'] = { columnIndex: 8, rowspan: 0, colspan: 0 };
        }
        //if end
        tmpData.push( subData );
      });
    }
    //無(wú)子項(xiàng)數(shù)據(jù)，保留當(dāng)前位置輸出
    else{
      tmpData.push(
        Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 1, colspan: 1 } }, item)
      );
    }
  });
  return tmpData;
}

此時(shí)，咱們需要的表格就被渲染出來(lái)了，如下圖：

3.7 span-method優(yōu)化

reconstructionStuCell()函數(shù)中對(duì)列的合并參數(shù)一一取出，這樣會(huì)比較繁瑣，通過(guò)for循環(huán)對(duì)row行內(nèi)數(shù)據(jù)進(jìn)行查詢，并通過(guò)columnIndex判斷對(duì)應(yīng)列及返回結(jié)果。代碼如下：

reconstructionCell({ row, column, rowIndex, columnIndex }){
    for(var key in row){
     //匹配列數(shù)據(jù)
     if(/columnIndex/.test(key)&&'undefined'!==typeof row[key]['columnIndex']){
       //關(guān)聯(lián)對(duì)應(yīng)列，并返回合并參數(shù)
       if(row[key].columnIndex == columnIndex){
         return {
           rowspan: row[key].rowspan,
           colspan: row[key].colspan
         }
       }
     }
    }
}

這里reconstructionStuData()函數(shù)處理能力還是相對(duì)不足，只能處理特定的表格合并。希望對(duì)大家有所幫助，僅供大家參考！

到此這篇關(guān)于Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼的文章就介紹到這了,更多相關(guān)Element-UI復(fù)雜表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: