el-select 滚动加载

npm i el-select-scroll
yarb add el-select-scroll

使用

以下示例全部支持滚动加载

示例一：远程搜索

<template>
  <select-scroll
  v-model="form.id"
    :length="list.length"
    :pageCur="params.pageNum"
    :pageSize="params.pageSize"
    :loading="loading"
    :total="total"
    :list="list"
    labelName="label"
    valueName="value"
    :defaultLabel="defaultLabel"
    :defaultValue="defaultValue"
    @handle="handle"
  >
  </select-scroll>
</template>

<script>
import SelectScroll from "el-select-scroll";
import _ from "lodash";
export default {
  components: {
    SelectScroll: SelectScroll,
  },
  data() {
    return {
      form: {
        id: "",
      },
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false, // 可以没有，不会有loading效果
      total: 0,
      list: [], // [{label:'',value:''}] // 默认 label value ，labelName='label' valueName="value"
      // 编辑时 回显
      defaultLabel:'',
      defaultValue:'',
    };
  },
  mounted(){
    this.getDetail()
  },
  methods: {
    async getDetail(){
      const reuslt=await getDetail(this.id)
      this.form=reuslt.data
      this.defaultLabel=result.data.userName
      this.defaultValue=result.data.userId
    },
    handle(event) {
      switch (event.type) {
        case "search":
          this.list = [];
          this.params.pageNum = 1;
          this.params.fishId = event.data;
          this.getList();
          break;
        case "getList":
          this.params.pageNum = this.params.pageNum + 1;
          this.getList();
          break;
        case "change":
          // this.form.id = event.data; // 已实现 v-model 功能，不需要再赋值
          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>

示例二：静态搜索

:remote="false"

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

<script>
export default {
  data() {
    return {
      form: {
        id: "",
      },
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false, // 可以没有，不会有loading效果
      total: 0,
      list: [],
      config: {
        remote: false, // 是否远程搜索，如果为 false，会自动根据 el-option 的 label 筛选
      },
    };
  },
};
</script>

示例三：不支持搜索

:filterable="false"

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

<script>
export default {
  data() {
    return {
      form: {
        id: "",
      },
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false, // 可以没有，不会有loading效果
      total: 0,
      list: [],
      config: {
        filterable: false, // 是否远程搜索，如果为 false，会自动根据 el-option 的 label 筛选
      },
    };
  },
};
</script>

示例四：不支持滚动分页加载

:disabledScroll="true" or :disabled="true"

配置项

禁止滚动分页加载： :disabledScroll="true" 不支持： loading loading-text allow-create

{
  form: {
    id: "",
  },
  params: {
    pageNum: 1,
    pageSize: 10,
  },
  loading: false, // 可以没有，不会有loading效果
  total: 0,
  list: [],
  /************ ************/
  // config 可以不用配置，不配置为示例一，支持远程搜索，支持滚动分页加载
  config: {
    placeholder: "请选择", // 默认：请选择
    clearable: true, // 是否可以清空选项，默认：true
    filterable: true, // 是否可以搜索，默认：true
    remote: true, // 是否远程搜索，如果为 false，会自动根据 el-option 的 label 筛选

    disabledScroll:false, // true 禁止滚动加载，默认：false
    // 以下为文档默认值
    disabled: false, // 禁止滚动加载
    popperAppendToBody:true,
    valueKey: undefined,
    size: undefined,
    multiple: false,
    collapseTags: false,
    multipleLimit: 0,
    name: undefined,
    autocomplete: undefined,
    noMatchText: undefined,
    noDataText: undefined,
    popperClass: undefined,
    reserveKeyword: false,
    defaultFirstOption: false,
    automaticDropdown: false,
  },
};

<select-scroll
  v-model="form.id"
  :length="list.length"
  :pageCur="params.pageNum"
  :pageSize="params.pageSize"
  :loading="loading"
  :total="total"
  :placeholder="config.placeholder"
  :clearable="config.clearable"
  :filterable="config.filterable"
  :remote="config.remote"
  :disabled="config.disabled"
  :valueKey="config.valueKey"
  :size="config.size"
  :multiple="config.multiple"
  :collapseTags="config.collapseTags"
  :multipleLimit="config.multipleLimit"
  :name="config.name"
  :autocomplete="config.autocomplete"
  :noMatchText="config.noMatchText"
  :noDataText="config.noDataText"
  :popperClass="config.popperClass"
  :reserveKeyword="config.reserveKeyword"
  :defaultFirstOption="config.defaultFirstOption"
  :automaticDropdown="config.automaticDropdown"
  @handle="handle"
>
  <el-option
    v-for="item in list"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  >
  </el-option>
</select-scroll>

版本记录

- 1.0.0

> 实现滚动分页加载效果
> 支持所有事件
> 支持所有插槽
> 支持大部分配置项

- 1.0.1

> 修改 `README.md`：`selected`改为`change`

- 1.0.2

> 修复 `bug`，最后一页出不来
> 实现 `v-model` 功能，不需要 `change事件` 赋值

- 1.0.3

> 修复 `bug` 聚焦判断列表无数据时 搜索，*有数据好像也会搜索的bug*

- 1.0.4

> 修改 `readme`

- 1.0.5

> 增加回显字段 `defaultLabel` `defaultValue`
> 增加列表字段 `list`
> 增加列表字段Name `labelName` `valueName`
> 修复回显 id 未赋值 bug

环境

1.0.0

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

打赏

• 您有任何意见或建议，请联系 [email protected]