vue使用elementui框架點擊對應複選框，el-table表格呈現對應數據（前端處理）

問題描述

前段時間項目中有一個小功能，就是上面一排複選框，下面是一個表格，點擊對應複選框，發請求獲取對應的內容，呈現到頁面上。其實很簡單，可是由於臨近過年，後端的同事要提早回家相親（大齡剩男的悲傷），因此後端同事就說，要不我把全部的數據都給你，你本身作存儲，點那個複選框，就呈現那個對應內容吧。（固然除了這個，還有別的小功能，都相似，就是數據的加工處理組裝之類的）,我說好的，祝你相親順利。而後我就按照項目的狀況，寫個相似的小例子，記錄一下

初始效果圖

最終效果圖

代碼部分

html

<template>
  <div id="app">
    <br />
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="西遊記">西遊記</el-checkbox>
      <el-checkbox label="三國演義">三國演義</el-checkbox>
      <el-checkbox label="水滸傳">水滸傳</el-checkbox>
    </el-checkbox-group>
    <br />
    <el-table
      :data="tableData"
      border
      height="300"
      :header-cell-style="{
        background: '#ECEEEF',
        color: '#3B3C3C',
        borderColor: '#D1D3D6',
        fontWeight: '600',
      }"
      style="width: 560px"
    >
      <el-table-column prop="fansName" label="讀者姓名" width="180">
      </el-table-column>
      <el-table-column prop="fansComments" label="讀者評價" width="180">
      </el-table-column>
      <el-table-column prop="fansRecommend" label="讀者推薦星數">
      </el-table-column>
    </el-table>
  </div>
</template>

js

按照註釋步驟來哦

<script>
export default {
  name: "app",
  data() {
    return {
      tableData: [],
      checkList: [],
    };
  },
  mounted() {
    /*
      第一步：思路分析
        假設下面的allTableData數據是咱們發請求，後端返回給的全部數據，由於須要前端拿到全部的數據之後，去對應呈現。
        因此在這裏咱們須要分類存儲，咱們根據type的類型分類本地存儲，當用戶點擊那個複選框，就呈現對應的數據
    */
    let allTableData = [
      {
        fansName: "孫悟空",
        fansComments: "西遊記真好看",
        fansRecommend: "五顆星",
        type: "bookOne",
      },
      {
        fansName: "豬八戒",
        fansComments: "西遊記老百姓必看",
        fansRecommend: "五顆星",
        type: "bookOne",
      },
      {
        fansName: "趙雲",
        fansComments: "三國演義真厲害",
        fansRecommend: "六顆星",
        type: "bookTwo",
      },
      {
        fansName: "關羽",
        fansComments: "三國演義真牛X",
        fansRecommend: "六顆星",
        type: "bookTwo",
      },
      {
        fansName: "宋江",
        fansComments: "水滸傳各個都是英雄好漢",
        fansRecommend: "七顆星",
        type: "bookThree",
      },
      {
        fansName: "吳用",
        fansComments: "水滸傳108個各個身懷絕技",
        fansRecommend: "七顆星",
        type: "bookThree",
      },
    ];
    // 第二步，準備好空數組容器，分別存對應數據
    let arr1 = [];
    let arr2 = [];
    let arr3 = [];
    allTableData.forEach((item) => { // 遍歷全部的數據分類存到對應的空數組容器裏
      if (item.type == "bookOne") {
        arr1.push(item);
      } else if (item.type == "bookTwo") {
        arr2.push(item);
      } else if (item.type == "bookThree") {
        arr3.push(item);
      }
    });
    console.log(arr1); // 數據分類，看看分好類數據的對不對
    console.log(arr2);
    console.log(arr3);
    // 第三步：把分好類的數據本地存儲，待會點誰、取誰、呈現誰
    sessionStorage.setItem("xiyouji", JSON.stringify(arr1));
    sessionStorage.setItem("sanguoyanyi", JSON.stringify(arr2));
    sessionStorage.setItem("shuihuzhuan", JSON.stringify(arr3));
  },
  watch: {
    /*
     第四步，監聽複選框的變化，這裏分爲兩種狀況：
            一個是用戶點擊增長的，就是依次選中
            二個是用戶點擊減小的，就是依次取消選中
    */
    checkList: {
      handler: function (newnew, oldold) {
        if (newnew.length > oldold.length) { // 說明在增長
          /*
            第五步，下面的這個方法是最重要的，咱們經過變化前和變化後的數據數組的長度的差值，
                    能夠判斷是在增長或減小。 可是，還要判斷增長的是誰，減小的是誰。
                    得知是誰以後才能夠呈現誰，或拿掉誰。
          */ 
          var result1 = oldold.concat(newnew).filter(function (v) {
            return oldold.indexOf(v) === -1 || newnew.indexOf(v) === -1;
          });
          console.log("點擊增長的", result1[0]); //看看增長的是誰
          /*
            第六步，由於數據很少，因此用窮舉法，把全部的狀況都列出來，一一進行判斷
                   其實數據量少了，前端仍是能夠幫後端作一些數據的處理，這樣後端就能夠
                   少了一些接口了，若是前端幹活快的話，這樣反而能夠加快開發的時間；
                   可是若是數據量多的狀況下，或者數據的更新特別頻繁的話，本文中這種方式
                   是不可取的，不只會致使前端頁面渲染的效率，還會致使呈現的數據不是最新
                   的數據。因此這種用法，看狀況而定。

          */ 
          if (result1[0] == "西遊記") {
            this.tableData = [
              ...this.tableData,
              ...(JSON.parse(sessionStorage.getItem("xiyouji")))
            ]
          }else if(result1[0] == "三國演義"){
            this.tableData = [
              ...this.tableData,
              ...(JSON.parse(sessionStorage.getItem("sanguoyanyi")))
            ]
          }else if(result1[0] == "水滸傳"){
            this.tableData = [
              ...this.tableData,
              ...(JSON.parse(sessionStorage.getItem("shuihuzhuan")))
            ]
          }
        } else { // 說明在減小
          var result2 = newnew.concat(oldold).filter(function (v) {
            return newnew.indexOf(v) === -1 || oldold.indexOf(v) === -1;
          });
          console.log("點擊減小的", result2[0]); //看看減小的是誰
          /*
            第七步，刪除這裏用filter過濾方法，看看減小的是誰，而後把對應類型的數據
                    給過濾掉。過濾掉至關於刪除掉。
          */ 
          if(result2[0] == "西遊記"){
            this.tableData = this.tableData.filter((item) => {
              return item.type != "bookOne";
            });
          }else if(result2[0] == "三國演義"){
            this.tableData = this.tableData.filter((item) => {
              return item.type != "bookTwo";
            });
          }else if(result2[0] == "水滸傳"){
            this.tableData = this.tableData.filter((item) => {
              return item.type != "bookThree";
            });
          }
        }
      },
    },
  },
};

總結

其實數據量少了，前端仍是能夠幫後端作一些數據的處理，這樣後端就能夠少寫一些接口了，若是前端幹活快的話，這樣反而能夠加快開發的時間；可是若是數據量多的狀況下，或者數據的更新特別頻繁的話，本文中這種方式是不可取的，不只會致使前端頁面渲染的效率，還會致使呈現的數據不是最新的數據。因此這種用法，看狀況而定。

有些工做前端能夠幫後端分擔，不過有些工做的確是須要後端去作的。反正先後端相互理解，共同把工做作好。我們打工人加油哦