This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Writing in the front

This is a problem encountered in the previous development, the filter options have a column for the selection TAB. Label data is returned once, and the label data itself has only two levels: first level label classification and second level label data. Secondary label data may return several thousand entries. Selecting several tags alone will not be a big problem, but when selecting a label classification, the page will have obvious lag.

Analysis of the

Reduce the number of actual rendered tabs on the page

By default, only the first 200 secondary label data are loaded. The page initializes the binding scroll event, scroll up the distance + display box height > the actual height of options, that is, scroll to the end. At this point, it is necessary to judge whether the data has been loaded under the label classification. If not, Option splices the next page data 200 or the remaining data, and scrolls the data to the corresponding position dom.scrollto (0, scrollTop) after the page rendering is completed.

    const Cascader_DOM_warp = Cascader_DOM.getElementsByClassName('el-cascader-menu__wrap') [0]
    // Bind the scroll event;
    Cascader_DOM_warp.addEventListener('scroll'.function (event) {
      let e = event.target;
      if (e.scrollTop + Math.ceil(e.getBoundingClientRect().height) >= e.offsetHeight) {
        / / throttling;
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() = > {
          _this.loadMore(Cascader_DOM_warp, e.scrollTop)
        }, 50)}})Copy the code

Splice tag data while searching

Fuzzy search will be used in the actual user process. Options not rendered by the current TAB will not be searched without further processing. Before-filter: Backs up the current label data before the default filter hook is called. Call the background and spell in the label query results for each group. Note that Promise, resolve(options concatenation result) are returned. After the selection is complete, if the label data is restored, the data not in the label is automatically deleted.

    beforeFilterEnterpriseLabel(name) {
      this.companyTags
      let params = {
        name
      }
      return new Promise((resolve, reject) = > {
        http
          .searchCompanyTag(params)
          .then((res) = > {
            this.lastCompanyTags = JSON.parse(JSON.stringify(this.companyTags))
            let filterArr = []
            res.data.forEach((item) = > {
              item.label = item.group_name
              item.value = item.group_name
              item.group_list.forEach((tagItem) = > {
                tagItem.label = tagItem.label_name
                tagItem.value = tagItem.id
              })
              item.children = item.group_list
              // Check which tag group is in
              // Label group children merge
              let i = this.casLevel0KeyArr.indexOf(item.value)
              item.children.forEach((searchItem) = > {
                if (
                  JSON.stringify(this.companyTags[i].children).includes(
                    `${searchItem.label}`)) {}else {
                  let arr = [...this.companyTags[i].children, searchItem]
                  this.companyTags[i].children = arr
                }
              })
            })
            resolve(this.companyTags)
          })
          .catch(() = >{})})}Copy the code

There are still problems: one is that the label rendering has been scrolling or there will be too many problems. Second, if the user enters again after searching and selecting and scrolls to trigger loading, the same option value and tag may appear twice. Legacy problems to see how to solve it… Welcome to give me some tips and ideas. 😢