文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-620209.html
<template>
? <div>
? ? <el-form
? ? ? ref="saveParameter"
? ? ? :model="saveParameter"
? ? ? inline
? ? ? inline-message
? ? ? style="margin:10px"
? ? >
? ? ? <el-form-item label="供應(yīng)商" prop="lngcustomerid">
? ? ? ? <el-select
? ? ? ? ? v-model="saveParameter.lngcustomerid"
? ? ? ? ? v-loadmore="loadMore()"
? ? ? ? ? style="width: 180px;"
? ? ? ? ? clearable
? ? ? ? ? :filter-method="filterMethod"
? ? ? ? ? filterable
? ? ? ? ? @visible-change="visibleChange"
? ? ? ? >
? ? ? ? ? <el-option
? ? ? ? ? ? v-for="item in stashList.slice(0,rangeNum)"
? ? ? ? ? ? :key="item.treedataid"
? ? ? ? ? ? :value="item.treedataid"
? ? ? ? ? ? :label="item.treedatacodeandname"
? ? ? ? ? />
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>
<script>
import { res } from './data.js'
import selectLoadMore from '@/layout/mixin/selectLoadMore'
import PinyinMatch from 'pinyin-match'
export default {
? name: 'SelectScroll',
? components: { listScroll },
? mixins: [selectLoadMore],
? data() {
? ? return {
? ? ? rangeNum: 10,
? ? ? customerList: res.data,
? ? ? stashList: res.data,
? ? ? saveParameter: {
? ? ? ? lngcustomerid: 7402
? ? ? }
? ? }
? },
? created() {
? ? this.findById(this.saveParameter.lngcustomerid)
? },
? methods: {
? ? loadMore() {
? ? ? // eslint-disable-next-line
? ? ? ? return () => this.rangeNum += 2
? ? },
? ? filterMethod(newVal) {
? ? ? if (newVal) {
? ? ? ? this.stashList = this.customerList.filter((item) => {
? ? ? ? ? return PinyinMatch.match(item.treedatacodeandname, newVal)
? ? ? ? })
? ? ? } else {
? ? ? ? this.stashList = this.customerList
? ? ? }
? ? },
? ? visibleChange(val) {
? ? ? // if判斷,防止搜索的數(shù)據(jù)選中后,多一次下拉隱藏
? ? ? if (val === true) {
? ? ? ? this.stashList = this.customerList
? ? ? }
? ? },
? ? // 查看編輯的時(shí)候賦值
? ? findById(id) {
? ? ? var o = []
? ? ? if (this.customerList.some(item => {
? ? ? ? if (item.treedataid === id) {
? ? ? ? ? o.push(item)
? ? ? ? ? return true
? ? ? ? }
? ? ? })) {
? ? ? ? this.stashList = this._.unionBy(o, this.stashList, 'treedataid')
? ? ? }
? ? }
? }
}
</script>
selectLoadMore.js
export default {
directives: {
'loadmore': {
bind(el, binding) {
const 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()
})
}
}
}
}
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-620209.html
到了這里，關(guān)于el-select 無(wú)限下拉滾動(dòng)加載數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
