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";
            });
          }
        }
      },
    },
  },
};

总结

其实数据量少了，前端还是可以帮后端做一些数据的处理，这样后端就可以少写一些接口了，如果前端干活快的话，这样反而可以加快开发的时间；但是如果数据量多的情况下，或者数据的更新特别频繁的话，本文中这种方式是不可取的，不仅会导致前端页面渲染的效率，还会导致呈现的数据不是最新的数据。所以这种用法，看情况而定。

有些工作前端可以帮后端分担，不过有些工作的确是需要后端去做的。反正前后端相互理解，共同把工作做好。咱们打工人加油哦