问题描述
前段时间项目中有一个小功能，就是上面一排复选框，下面是一个表格，点击对应复选框，发请求获取对应的内容，呈现到页面上。其实很简单，但是因为临近过年，后端的同事要提前回家相亲（大龄剩男的悲伤），所以后端同事就说，要不我把所有的数据都给你，你自己做存储，点那个复选框，就呈现那个对应内容吧。（当然除了这个，还有别的小功能，都类似，就是数据的加工处理组装之类的）,我说好的，祝你相亲顺利。然后我就按照项目的情况，写个类似的小例子，记录一下
初始效果图
最终效果图
代码部分
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";
});
}
}
},
},
},
};
总结
其实数据量少了，前端还是可以帮后端做一些数据的处理，这样后端就可以少写一些接口了，如果前端干活快的话，这样反而可以加快开发的时间；但是如果数据量多的情况下，或者数据的更新特别频繁的话，本文中这种方式是不可取的，不仅会导致前端页面渲染的效率，还会导致呈现的数据不是最新的数据。所以这种用法，看情况而定。
有些工作前端可以帮后端分担，不过有些工作的确是需要后端去做的。反正前后端相互理解，共同把工作做好。咱们打工人加油哦
