前端解決查詢慢的問題

問題：點擊導入按鈕后，在選擇審核人時，會先選擇部門，但是點擊下拉框后發現彈出無數據，過3~4s后才彈出數據。

原因分析：在后台，部門的查詢由於是六張表的多表查詢，查詢速度慢，給SQL中where后面的查詢條件添加索引仍然沒有效果，此時可以在前端解決，

解決方法一：在created中調用getAllDeptAllUsers方法

在渲染完成前就去后台查詢，此時瀏覽器第一次向服務器發起該請求，拿到請求結果后，將請求結果和緩存標識存入瀏覽器緩存，這樣當真正要查詢后台的時候，即點擊導入按鈕時就直接查詢瀏覽器緩存了，從而解決了查詢慢的問題。

由上圖我們可以知道：

• 瀏覽器每次發起請求，都會先在瀏覽器緩存中查找該請求的結果以及緩存標識

• 瀏覽器每次拿到返回的請求結果都會將該結果和緩存標識存入瀏覽器緩存中

解決方法二：利用element-ui中的Loading加載中的區域加載，即在加載數據時顯示動效。

前端代碼如下：

<el-form-item label="種子名稱:" prop="materialCode">
  <el-select v-loading="materialOptionsLoading" filterable v-model="edit.materialCode" style="width: 100%;">
    <el-option
      v-for="item in materialOptions"
      :key="item.id"
      :label="item.materialName"
      :value="item.materialCode">
    </el-option>
  </el-select>
</el-form-item>

data() {
      return {
          materialOptionsLoading: false
      };
    },

materialOptionsLoading的初始值設置為false，表示沒有動效，當前端從后台請求到數據之前，值為true，表示有動效，當獲取到數據之后，將materialOptionsLoading設置為false，即取消動效。

initMaterial() {
  // 獲取種子
  this.materialOptionsLoading = true;
  seed.getOriginList().then(response => {
    if (response.success) {
      this.materialOptions = response.data;
    } else {
      this.$message.error("種子信息獲取失敗");
    }
  }).catch(error => {
    console.error(error);
    this.$message.error("發生內部錯誤，請聯系管理員");
  }).finally(() => {
    this.materialOptionsLoading = false;
  });
},