VUE + Element UI选择器实现无限下拉加载数据

实现无限下拉加载数据

页面

			<Select
                v-model="addform.partyMemberId"
                allowClear
                placeholder="请选择"
                v-el-select-loadmore="loadmore" // 自定义方法
              >
                <Option
                  v-for="item in partyOption"
                  :value="item.id"
                  :key="item.id"
                >
                  {{ item.NAME }}
                </Option>
              </Select>

使用directives来监听滑动条移动

directives: {
    'el-select-loadmore': {
      bind (el, binding) {
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          const condition = this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },

方法函数

loadmore () {
		// 分页
      this.form.pageNum++;
        findPropertyByHid({ hid: this.form.projectId, pageNum: this.form.pageNum, pageSize: this.form.pageSize }).then(res => {
          if (res.state) {
            const _res = res.data;
            // 新的数据放在数组后面
            this.propertyList = [...this.propertyList, ..._res];
          }
        })
    },