LoadMoreSelect触底加载与远程搜索

       使用方法

使用方法

 //父组件

            <el-form-item

                    class="form-condition"
                    :label="$t('privacyPolicy.userId')"
                    prop="userNo"
                  >
                    <LoadMoreSelect
                      v-model="detailForm.userNo"
                      :fetchOptions="fetchStockLocationUserNoData" //必传 加载函数
                      keyField="value" //绑定的key 可选
                      labelField="label" // label 自定义名称 可选
                      valueField="value" // value 自定义名称 可选 
                      :page="this.selectPage.pageIndex" //页码 可选 默认1
                      :pageSize="this.selectPage.pageSize" //数量 可选 默认50
                    />
            </el-form-item>

import LoadMoreSelect from '@/components/LoadMoreSelect/LoadMoreSelect.vue';


components: { LoadMoreSelect },


methods: {
    async fetchStockLocationUserNoData({ pageIndex, pageSize, query }) {
      const response = await qryUserId({
        pageIndex,
        pageSize,
        info: query,
        isDeleted: 0 //自定义参数
      });
      return response;
    },
}

main.js
Vue.directive('loadmore', {

  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
    let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    select_dom.addEventListener('scroll', function () {
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (CONDITION) {
        binding.value();
      }
    });
  }
});

使用方法

 //父组件

            <el-form-item

                    class="form-condition"
                    :label="$t('privacyPolicy.userId')"
                    prop="userNo"
                  >
                    <LoadMoreSelect
                      v-model="detailForm.userNo"
                      :fetchOptions="fetchStockLocationUserNoData" //必传 加载函数
                      keyField="value" //绑定的key 可选
                      labelField="label" // label 自定义名称 可选
                      valueField="value" // value 自定义名称 可选 
                      :page="this.selectPage.pageIndex" //页码 可选 默认1
                      :pageSize="this.selectPage.pageSize" //数量 可选 默认50
                    />
            </el-form-item>

import LoadMoreSelect from '@/components/LoadMoreSelect/LoadMoreSelect.vue';


components: { LoadMoreSelect },


methods: {
    async fetchStockLocationUserNoData({ pageIndex, pageSize, query }) {
      const response = await qryUserId({
        pageIndex,
        pageSize,
        info: query,
        isDeleted: 0 //自定义参数
      });
      return response;
    },
}

<template>
  <el-option ref="el" class="el-select-loading" value="">
    <template v-if="hasMore">
      <el-icon v-if="loading" class="el-icon-loading"></el-icon>
      <span v-if="loading" class="el-select-loading__tips">{{ $t('common.loading') }}</span>
      <span v-else class="el-select-loading__tips">{{ $t('common.SeeMore') }}</span>
    </template>
    <template v-else>{{ $t('common.Nodata') }}</template>
  </el-option>
</template>

<script>
export default {
  name: 'LoadMoreSelectOption',
  props: {
    // 是否有更多数据可加载
    hasMore: {
      type: Boolean,
      required: false
    },
    loading: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {};
  },
  mounted() {},
  beforeDestroy() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.el-select-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: initial;
  pointer-events: none;
  background-color: rgb(255, 255, 255);
  // color: #7fb8f2;
  color: #4d4d4d;
  font-size: 12px;

  &__icon {
    font-size: 16px;
    animation: rotate 1.5s linear infinite;
  }

  &__tips {
    margin-left: 6px;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>