elementUI的el-select下拉加载更多及远程搜索

weixin_43968963

已于 2022-02-15 18:52:47 修改

阅读量2.7k

点赞数 1

分类专栏： vue 文章标签： elementui javascript vue.js

于 2022-02-15 15:30:01 首次发布

本文链接：https://blog.csdn.net/weixin_43968963/article/details/122945222

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

参考于官网（https://element.eleme.cn/#/zh-CN/component/select）及博客（https://blog.51cto.com/u_15127634/4027669）

前置：vue脚手架搭建出来的项目（此方法适用于下拉选择单选，多选的情况下，会每获取焦点一次则会请求一次）

在main.js写一个自定义指令

/* 自定义指令复选框下拉加载更多 使用 el-select-loadmore*/
Vue.directive('selectLoadmore', {
  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();
      }
    });
  }
})

页面使用指令，添加远程搜索属性和方法
注意点：官网中提到启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

<!-- @focus 解决搜索失去焦点之后，数据不会重置的问题 -->
<el-select size="mini"  v-model="interestsOptionsId" filterable clearable placeholder="请选择"
 @focus="remoteMethod('')" remote 
reserve-keyword :loading="interesLoading"  :remote-method="remoteMethod"  v-select-loadmore="interestsLoadmore" >
        <el-option  v-for="item in interestsOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
 </el-select>

我在项目中使用的是mixins方法混入，在src下新建一个文件夹命名为mixins，在此文件夹下新建一个js文件，命名为interests.js，代码如下：

// 引入封装好的请求接口
import {  Interface } from "@/api/interestsRights";
let interests = {
    data() {
        return {
            interestsOptions: [], //  接口返回数据
            interesLoading:false,
            formData: {
                page: 1,
                size: 100,
                last_pageIndex: 0,
                
            },
            searchEquity:{
                equity_name:"",
                provider_id:[]
            },
        }
    },
    created() { },
    methods: {
         // 远程搜索
    	remoteMethod(query) {
        	console.log(query,8888)
        	this.searchEquity.equity_name = query;
        	this.formData.page  = 1;
        	this.interestsOptions = [];
          	this.interesLoading = true;
          	this.managementListOption(); // 请求接口
      	},
        interestsLoadmore(){
            setTimeout(() => {
                this.formData.page = this.formData.page + 1;
                if (this.formData.last_pageIndex < this.formData.page) {
                    this.formData.page = this.formData.last_pageIndex
                    return;
                }
                this.managementListOption();
            }, 1000);
        },
        managementListOption() {
            // 这里是接口请求数据, 带分页条件
            Interface(this.formData.page,this.formData.size,"",this.searchEquity).then((res) => {
                // console.log(res,777);
                this.interesLoading = false
                this.formData.last_pageIndex = res.data.last_page;
                this.interestsOptions = [...this.interestsOptions, ...res.data.data];
            });
        },
    }
}

export default interests;

页面中混入mixins，代码如下：

import interests from "@/mixins/interests"; // 引入mixins方法
export default {
  name: "Management",
  mixins: [interests],
  data() {
    return { };
  },
  created() {},
  methods: {},
};