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

属性|说明|类型|默认值 :-------: | :------- | :-------: | :-------: value | 默认选中的数据, 6位数字或者地区中文数组 |String, Number, Array | - disabledScroll | 禁用下拉加载 |Boolean | false disabled | 设置为禁止选择状态 |Boolean | false placeholder | 占位符 |String | 请选择 clearable | 是否可以清空选项 |Boolean | true filterable | 是否可搜索 |Boolean | true remote | 是否为远程搜索 |Boolean | false total | 数据总条数 |Number | 0 length | 当前已加载的数据条数 |Number | 0 pageCur | 当前页码 |Number | 1 pageSize | 每页显示的数据条数 |Number | 10 loading | 是否显示加载动画 |Boolean | false multiple | 是否允许多选 |Boolean | false size | 输入框尺寸 |String | - collapseTags | 多选时是否将选中值按文字的形式展示 |Boolean | false multipleLimit | 多选时用户最多可以选择的项目数，为 0 则不限制 |Number | 0 name | select input 的 name 属性 |String | 0 autocomplete | select input 的 autocomplete 属性 |String | off noMatchText | 搜索条件无匹配时显示的文字，也可以使用slot="empty"设置 |String | 无匹配数据 noDataText | 选项为空时显示的文字，也可以使用slot="empty"设置 |String | 无数据 popperClass | Select 下拉框的类名 |String | - reserveKeyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 |Boolean | false defaultFirstOption | 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 |Boolean | false automaticDropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 |Boolean | false popperAppendToBody | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false |Boolean | true

events

事件名|说明|返回值|返回值参数说明 :-------: | :------- | :-------: | :-------: handle | 操作事件 |Objece{ type, data } | 详见下表

handle回调type

事件名|说明 :-------: | :-------: search | 搜索事件 getList | 分页事件 change | 选中值发生变化时触发 focus | 当 input 获得焦点时触发 visible-change | 下拉框出现/隐藏时触发 remove-tag | 多选模式下移除tag时触发 clear | 可清空的单选模式下用户点击清空按钮时触发 blur | 当 input 失去焦点时触发

环境

1.0.0

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