526互联

element中select组件加入滚动分页及模糊查询

发布时间 2023-11-16 18:52:45作者: 天官赐福·

element中select组件加入滚动分页及模糊查询

1.directive.js-自定义vue指令

import Vue from 'vue'
 
export default () => {
  Vue.directive('loadMore', {
    bind (el, binding) {
    //  如上图，我通过v-if来控制了两个select框，当没有binding.arg这个参数时，我只能监听到企业类型下的select框，所以，我通过传参控制了监听的哪个select框
      var className = '.' + binding.arg
      el.className = binding.arg
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
      // const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)
      SCROLL_DOM.addEventListener('scroll', function () {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const CONDITION = this.scrollHeight - Math.ceil(this.scrollTop) <= this.clientHeight
        // 如果已达到指定位置则触发
        if (CONDITION  && this.scrollTop !== 0) {
          // 将滚动行为告诉组件
          binding.value()
        }
      })
    }
  })
}

2.main.js中引入并注册自定义指令

// 下拉组件滚动查询数据的自定义指令
import Directives from './directives';
Vue.use(Directives)

3.select组件使用自定义指令

<el-select
  v-model="form.tableName"
  placeholder="请选择表名称"
  filterable
  allow-create
  default-first-option
  clearable
  v-loadMore="handleScroll" //使用自定义指令，滚动时触发
  remote //是否为远程搜索
  :remote-method="remoteMethod" //远程搜索的方法
  :loading="dataTableLoading" //加入loading
  @clear="remoteMethod" //清空时重新调用一下接口
>
  <el-option
    v-for="item in selectDataTableList"
    :key="item.tbId"
    :label="item.tableName"
    :value="item.tableName"
  />
</el-select>


methods:{
    //获取下拉数据
    async getTableList(){
      this.tableLoading = true;
      const res = await getTableList({ 
        current: this.datasourcePage,
        size: 20,
        tableName: this.searchTableName
      });
      //滚动分页之后需要叠加之前获取到的数据
      this.selectDataTableList = [...this.selectDataTableList || [], ...res.data.records || []];
      this.selectDataTableTotal = res.data.total;
      this.tableLoading = false;
    },
        
    // 滚动搜索下拉表数据
    handleScroll(){
     //滚动页数增加
      this.datasourcePage++;
     //判断如果数据长度大于总长度就不进行接口调用
      if( this.selectDataTableList.length < this.selectDataTableTotal ){
        this.getDatasourceTableList(this.form.disId || this.editArr?.dataSourceId);
      }
    },
                                    
    // 远程模糊查询下拉表数据
    remoteMethod(val){
      //模糊搜索的时候需要将页数重置；
      this.datasourcePage = 1;
      //将数组重置, 否则模糊搜索查询到的数据会叠加之前没有模糊搜索的数据里面
      this.selectDataTableList = [];
      //设置模糊查询的内容
      this.searchTableName = val;
      //调用接口获取数据
      this.getDatasourceTableList(this.form.disId || this.editArr?.dataSourceId);
    }
}

4.模糊搜索方法2 - filter-method 替代 remote-method

main.js中 全局引入lodash

import _ from 'lodash';
Vue.prototype._ = _;  // 使用 this._.debounce(this.handleClick,1000,false)

修改select组件属性： filter-method ---> 自定义搜索方法

使用  :filter-method="this._.debounce(this.remoteMethod, 1000, false)" //搜索内容的时候进行防抖
代替  remote //是否为远程搜索
     :remote-method="remoteMethod" //远程搜索的方法

该方法好处：编辑回显时，如果当前下拉值在下拉数据中没有，也会显示到下拉列表的数据中（应对业务的奇葩需求）