scroll-el-select v1.0.5

el-select 下拉滚动加载

npm i scroll-el-select
yarn add scroll-el-select

使用

以下示例全部支持下拉加载

示例：远程搜索

<template>
  <select-scroll
    :value="form.id"
    :length="list.length"
    :pageCur="params.pageNum"
    :pageSize="params.pageSize"
    :loading="loading"
    :total="total"
    @handle="handle"
  >
    <el-option
      v-for="item in list"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </select-scroll>
</template>

<script>
import SelectScroll from "scroll-el-select";
import _ from "lodash";
export default {
  components: {
    SelectScroll: SelectScroll,
  },
  data() {
    return {
      form: {
        id: "",
      },
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false, // 可以没有，不会有loading效果
      total: 0,
      list: [],
    };
  },
  methods: {
    handle(event) {
      switch (event.type) {
        case "search":
          this.list = [];
          this.params.pageNum = 1;
          this.getList();
          break;
        case "getList":
          this.params.pageNum = this.params.pageNum + 1;
          this.getList();
          break;
        case "change":
          this.form.id = event.data;
          break;
        default:
        // 支持事件：["focus", "visible-change", "remove-tag", "clear", "blur"];
      }
    },
    getList: _.debounce(function () {
      this.loading = true;
      fetch(`/list?${qs.stringify(this.params)}`)
        .then((res) => res.json())
        .then((res) => {
          if (res && Array.isArray(res.rows)) {
            this.total = res.total;
            this.list.push(...res.rows);
          } else {
            throw new Error();
          }
        })
        .catch(() => {
          let pageNum = this.params.pageNum - 1;
          this.params.pageNum = pageNum < 1 ? 1 : pageNum;
        })
        .finally(() => {
          this.loading = false;
        });
    }),
  },
};
</script>

API SelectScroll

props

events

handle回调type

环境

1.0.0

{
  "dependencies": {
    "element-ui": "^2.15.12",
    "lodash": "^4.17.21",
    "vue": "^2.7.7"
  }
}