Problem description

Some time ago, there was a small function in the project, which was a row of check boxes above and a table below. Click the corresponding check box, send a request to obtain the corresponding content, and present it on the page. In fact, it is very simple, but because the Chinese New Year is approaching, the back-end colleagues have to go home in advance for blind date (sad old leftover men), so the back-end colleagues said, why don’t I give you all the data, you do the storage, click the check box, and present the corresponding content. (Of course, in addition to this, there are other small functions, are similar, is the data processing assembly and so on), I said ok, WISH you a smooth blind date. Then I will write a similar small example according to the situation of the project and record it

Initial renderings

Final rendering

Code section

html

<template>
  <div id="app">
    <br />
    <el-checkbox-group v-model="checkList">
      <el-checkbox label=Journey to the West>Journey to the west</el-checkbox>
      <el-checkbox label=Romance of The Three Kingdoms>The romance of The Three Kingdoms</el-checkbox>
      <el-checkbox label="Water Margin">Water margin</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="Reader's Name" width="180">
      </el-table-column>
      <el-table-column prop="fansComments" label="Reader comments" width="180">
      </el-table-column>
      <el-table-column prop="fansRecommend" label="Number of stars recommended by readers">
      </el-table-column>
    </el-table>
  </div>
</template>
Copy the code

js

Follow the comment steps

<script>
export default {
  name: "app".data() {
    return {
      tableData: [].checkList: [],}; },mounted() {
    /* First step: let's suppose the following allTableData is all the data that we sent the request to the back end, because the front end needs to get all the data, to render the corresponding data. So here we need to sort the storage, we sort the local storage according to the type of type, and when the user clicks that check box, it presents the corresponding data */
    let allTableData = [
      {
        fansName: "Sun Wukong".fansComments: "Journey to the West is beautiful.".fansRecommend: "Five stars".type: "bookOne"}, {fansName: "Pig Eight Quit".fansComments: "Journey to the West must be seen by ordinary people.".fansRecommend: "Five stars".type: "bookOne"}, {fansName: "Zhaoyun".fansComments: "The Romance of The Three Kingdoms is amazing.".fansRecommend: "Six stars".type: "bookTwo"}, {fansName: "Guan yu".fansComments: "Romance of The Three Kingdoms: True Ox X".fansRecommend: "Six stars".type: "bookTwo"}, {fansName: "Sung river".fansComments: "All are heroes of the Marsh.".fansRecommend: "Seven stars".type: "bookThree"}, {fansName: "吴用".fansComments: "108 outlaws of the Marsh.".fansRecommend: "Seven stars".type: "bookThree",},];// Create an empty array container to store the corresponding data
    let arr1 = [];
    let arr2 = [];
    let arr3 = [];
    allTableData.forEach((item) = > { // Iterate over all data categories and store them in the corresponding empty array container
      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); // Select * from the class where the data is classified
    console.log(arr2);
    console.log(arr3);
    // Step 3: store the sorted data locally, and select, select, and present the selected data
    sessionStorage.setItem("xiyouji".JSON.stringify(arr1));
    sessionStorage.setItem("sanguoyanyi".JSON.stringify(arr2));
    sessionStorage.setItem("shuihuzhuan".JSON.stringify(arr3));
  },
  watch: {
    /* step 4, monitor the change of the check box, there are two kinds of cases: one is the user clicks increase, that is, the user clicks decrease, that is, uncheck */
    checkList: {
      handler: function (newnew, oldold) {
        if (newnew.length > oldold.length) { // The description is increasing
          /* Change the length of the array before and after the change, we can determine whether the array is increasing or decreasing. However, it is also necessary to determine who is increasing and who is decreasing. Only when we know who it is can we present or remove who it is. * / 
          var result1 = oldold.concat(newnew).filter(function (v) {
            return oldold.indexOf(v) === -1 || newnew.indexOf(v) === -1;
          });
          console.log("Click to add", result1[0]); // See who is added
          / * step 6, because the data is not much, so the exhaustive method, all the conditions listed, one by one Actually data quantity is little, front end still can do some data for the back-end processing, so the back-end can less interface, if the front-end work fast, so it can speed up the development time; However, if there is a large amount of data, or data updates are particularly frequent, this method is not recommended in this paper, which will not only lead to the efficiency of front-end page rendering, but also cause the data presented is not the latest data. So the usage, it depends. * / 
          if (result1[0] = =Journey to the West) {
            this.tableData = [
              ...this.tableData,
              ...(JSON.parse(sessionStorage.getItem("xiyouji")))]}else if(result1[0] = =Romance of The Three Kingdoms) {this.tableData = [
              ...this.tableData,
              ...(JSON.parse(sessionStorage.getItem("sanguoyanyi")))]}else if(result1[0] = ="Water Margin") {this.tableData = [
              ...this.tableData,
              ...(JSON.parse(sessionStorage.getItem("shuihuzhuan")))]}}else { // The description is decreasing
          var result2 = newnew.concat(oldold).filter(function (v) {
            return newnew.indexOf(v) === -1 || oldold.indexOf(v) === -1;
          });
          console.log("Clickless", result2[0]); // See who is reduced
          /* Step 7, delete the data from the filter method, and then filter out the corresponding type of data. Filtering out is equivalent to deleting. * / 
          if(result2[0] = =Journey to the West) {this.tableData = this.tableData.filter((item) = > {
              returnitem.type ! ="bookOne";
            });
          }else if(result2[0] = =Romance of The Three Kingdoms) {this.tableData = this.tableData.filter((item) = > {
              returnitem.type ! ="bookTwo";
            });
          }else if(result2[0] = ="Water Margin") {this.tableData = this.tableData.filter((item) = > {
              returnitem.type ! ="bookThree"; }); }}},},},};Copy the code

conclusion

In fact, the amount of data is less, the front end can help the back end to do some data processing, so the back end can write less interface, if the front end work fast, it can speed up the development time; However, if there is a large amount of data, or data updates are particularly frequent, this method is not recommended in this paper, which will not only lead to the efficiency of front-end page rendering, but also cause the data presented is not the latest data. So the usage, it depends.

Some work can be done by the front end, but some work needs to be done by the back end. Anyway, the front and back ends understand each other and get the job done together. Let’s work hard