2021-06-22 vue element el-select元件封裝 支援懶加載 多選 回顯

vue element el-select元件封裝 支援懶加載 多選 回顯

• el-select資料過多處理方式
• • • 假設我們有個下拉框是用來選擇課程的：
    • javascript

el-select資料過多處理方式

一種優化思路：

element-ui的select有一個remote-method，支援遠端搜尋，我們讓服務端支援一下不就可以了，當然這是一種解決的方案。但是有時候這種方法對我并能夠不适用，因為這樣會出現回顯問題，回顯的時候是還需拿到所需option；

另一種優化思路：

下拉懶加載, 當select滾動到底部時, 你再去請求一部分資料, 加入到目前資料中.

假設我們有個下拉框是用來選擇課程的：

<template>
  <el-select
    v-model="newValue"
    :laceholder="placeholderText"
    filterable
    remote
    clearable
    :disabled="disabled"
    :multiple="isMultiple"
    @change="handleChange"
    reserve-keyword
    :remote-method="remoteMethod"
    :style="styles"
    :loading="loading"
    v-el-select-loadmore="loadmore"
  >
    <el-option
      v-for="item in list"
      :key="item.index"
      :label="item.title"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>
           

javascript

var timer;
export default {
  props: {
    value: {},
    styles: {},
    condition: {},
    isMultiple: { default: false },
    placeholderText: { default: "請選擇" },
    size: { default: "mini" },
    disabled: { default: false },
    autoLoad: { default: true },
    table: {
      type: String,
      required: true,
    },
  },
  // 自定義指令
  directives: {
    "el-select-loadmore": {
      bind(el, binding) {
        // 擷取element-ui定義好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function() {
          /**
           * scrollHeight 擷取元素内容高度(隻讀)
           * scrollTop 擷取或者設定元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有産生垂直方向的滾動條, 那它的scrollTop的值預設為0.
           * clientHeight 讀取元素的可見高度(隻讀)
           * 如果元素滾動到底, 下面等式傳回true, 沒有則傳回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },
  data() {
    return {
      newValue: this.isMultiple ? [] : "",
      list: [],
      loading: false,
      formData: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  watch: {
    value: function(val) {
      if (
        ((this.isMultiple && val.length != 0) ||
          (typeof this.isMultiple == "undefined" && val != "")) &&
        this.list.length == 0
      ) {
        this.getList();
      } else {
        this.newVal = val;
      }
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    loadmore() {
      this.formData.pageNum++;
      this.getList();
    },
    loadData() {
      if (this.autoLoad == false) return;
      this.getList();
    },
    getList() {
      this.loading = true;
      var path;
      switch (this.table) {
        case "course":
          path = "course/list";
          this.pk = "id";
          this.label = "title";
          break; // 内部 庫内課程
        default:
          alert("缺少元件參數");
      }
      this.$http.fetch(path, this.formData, this.condition).then((res) => {
        console.log(res);
        // this.list = res.data;
        this.loading = false;
        this.list = [...this.list, ...res.data];
      });
    },
    handleChange() {
      this.$emit("input", this.newValue);
    },
    remoteMethod(query) {
      console.log(query);
      // 遠端搜尋 邏輯
      var url = "";
      if (this.table == "course") {
        url = "course/list";
      } else {
        return;
      }
      if (query !== "") {
        this.loading = true;
        clearTimeout(timer);
        timer = setTimeout(() => {
          this.$http.fetch(url, { search_title: query }).then((res) => {
            this.loading = false;
            this.list = res.data;
          });
        }, 500);
      } else {
        this.list = [];
      }
    },
  },
};
           

到這裡元件就已經編寫完成了，現在隻要在使用頁面調取元件就可以使用了

現在來看一下調用元件之後的頁面

選擇之後的頁面

支援多選 單個删除 一鍵删除 回顯

這樣就做到了滾動懶加載, 具體細節在使用時修改.