el-select处理加载更多下一页数据

<el-select
	v-model="row.paramValue"
	placeholder="请选择"
	class="w100"
	clearable
	filterable
	v-loadmore="getDictList"
	:multiple="row.isMultiple"
	:collapse-tags="row.isMultiple"
	@focus="handleFocus($event, row, rowIndex)"
	@change="changeParamValue($event, row, rowIndex)"
>
	<el-option
		v-for="(item, index) in row.dictList"
		:key="row.paramName + '_' + index"
		:label="item.text"
		:value="item.value"
	>
	</el-option>
	<el-option
		v-if="row.isLoading"
		label="加载中..."
		value="-1"
		v-loading="row.isLoading"
		disabled
		class="fs12"
	></el-option>
	<el-option v-if="row.noMore" label="没有更多数据了" value="0" disabled class="fs12"></el-option>
</el-select>
// 分页加载,参数值的下拉数据
getDictList() {
	const item = this.configForm.data[this.currentIndex] // 表格中的此行数据
	// 不需要接口
	if (!item.isLazy) {
		return
	}
	// 到最后一页
	if (item.noMore) {
		return
	}
	item.isLoading = true
	item.pageNo++
	const params = {
		reportId: this.addForm.typeId,
		paramName: item.paramName,
		pageNo: item.pageNo,
		dbCode: item.dbCode
	}
	// 加载下一页
	API.queryParamPageList(params).then((res) => {
		if (res.data.length < 1) {
			item.noMore = true // 没有更多数据
		} else {
			item.noMore = false
			// 过滤掉addList的值
			let restDict = []
			const _i = this.handleDict.find((n) => n.paramName === item.paramName && n.dbCode === item.dbCode)
			if (_i) {
				res.data.map((x) => {
					if (_i.addList && _i.addList.length > 0 && !_i.addList.find((n) => n.value === x.value)) {
						restDict.push(x)
					}
				})
			} else {
				restDict = res.data
			}
			console.log(restDict, 'restDict', restDict.length)
			item.dictList.push(...restDict) // 拼接数据
		}
		item.isLoading = false
		this.$set(this.configForm.data, this.currentIndex, item)
	})
},




// 指令
directives: {
	// 加载更多
	loadmore: {
		// bind() {},
		inserted(el, binding) {
			const selectWrapEl = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
			selectWrapEl.addEventListener('scroll', function () {
				const flag = this.scrollHeight - this.scrollTop <= this.clientHeight
				if (flag) {
					console.log('触底')
					binding.value()
				}
			})
		}
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值