关于前端:vue使用elementui框架点击对应复选框eltable表格呈现对应数据前端处理

问题形容

前段时间我的项目中有一个小性能，就是下面一排复选框，上面是一个表格，点击对应复选框，发申请获取对应的内容，出现到页面上。其实很简略，然而因为邻近过年，后端的共事要提前回家相亲（大龄剩男的悲伤），所以后端共事就说，要不我把所有的数据都给你，你本人做存储，点那个复选框，就出现那个对应内容吧。（当然除了这个，还有别的小性能，都相似，就是数据的加工解决组装之类的）, 我说好的，祝你相亲顺利。而后我就依照我的项目的状况，写个相似的小例子，记录一下

初始效果图

最终效果图

代码局部

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

总结

其实数据量少了，前端还是能够帮后端做一些数据的解决，这样后端就能够少写一些接口了，如果前端干活快的话，这样反而能够放慢开发的工夫；然而如果数据量多的状况下，或者数据的更新特地频繁的话，本文中这种形式是不可取的，不仅会导致前端页面渲染的效率，还会导致出现的数据不是最新的数据。所以这种用法，看状况而定。

有些工作前端能够帮后端分担，不过有些工作确实是须要后端去做的。反正前后端相互理解，独特把工作做好。咱们打工人加油哦