1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| <template>
<el-select :value="value" size="small" clearable filterable :multiple="multiple" placeholder="请输入关键词" v-el-select-loadmore="loadmore" :filter-method="handleSearch" @change="handleChange">
<template v-if="lazyData&&lazyData.length>0">
<el-option v-for="item in lazyData" :key="item[prop.key||'id']" :label="item[prop.label||'label']" :value="item[prop.value||'id']">
</el-option>
</template>
</el-select>
</template>
<script>
export default {
props: {
value: {
type: [String, Number, Array]
},
data: {
type: [],
default: () => []
},
multiple: {
type: Boolean,
default: false
},
prop: {
type: Object,
default: () => ({
key: 'id',
label: 'label',
value: 'id',
})
}
},
model: {
prop: 'value',
event: 'change'
},
data() {
return {
keyWord: '',
pageData: {
pageIndex: 1,
pageSize: 10
},
lazyData: null,
completeData: null
}
},
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 <= this.clientHeight;
if (condition) {
binding.value();
}
});
}
}
},
watch: {
data: {
deep: true,
immediate: true,
handler(val) {
if (val.length > 0) {
this.lazyData = val.slice(0, this.pageData.pageSize)
this.completeData = JSON.parse(JSON.stringify(val))
this.updateLazyData(this.value)
}
},
},
value: {
immediate: true,
handler(val) {
this.updateLazyData(val)
}
}
},
methods: {
handleChange(val) {
this.$emit('change', val)
},
// 自定义搜索
handleSearch(key) {
this.keyWord = key.trim()
if (key) {
this.lazyData = this.completeData.filter(item => {
return item.name.includes(key)
})
} else {
this.lazyData = this.completeData.slice(0, this.pageData.pageSize)
}
},
// 懒加载
loadmore() {
// 如果有搜索关键字，则不加载懒加载数据
if (this.keyWord) {
this.pageData.pageIndex = 1
return
}
this.pageData.pageIndex++;
let num = this.pageData.pageIndex * this.pageData.pageSize;
this.lazyData = this.completeData.filter((item, index, arr) => {
return index < num; //这里默认allData已经取到了数据
});
},
// 有 value 时更新懒加载数据
updateLazyData(val) {
if (val && this.completeData && this.lazyData) {
let isShow = this.lazyData.some(item => item.id == val)
if (!isShow) {
let index = this.completeData.findIndex(item => item.id == val)
let item = this.completeData.splice(index, 1)
this.lazyData = [...this.lazyData, ...item]
}
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
|
