[update] 修改select2

This commit is contained in:
ibuler
2020-04-07 14:38:12 +08:00
parent 4f57fd3ba1
commit 8ce5f57a20
3 changed files with 77 additions and 34 deletions

View File

@@ -1,11 +1,11 @@
<template>
<el-select
v-model="vaultOrDefault"
v-model="valueSafe"
v-loadmore="loadMore"
:options="options"
:options="optionsSafe"
:remote-method="filterOptions"
:loading="loading"
multiple
:multiple="multiple"
filterable
remote
v-bind="$attrs"
@@ -13,11 +13,12 @@
v-on="$listeners"
>
<el-option
v-for="item in options"
v-for="item in optionsSafe"
:key="item.value"
:label="item.label"
:value="item.value"
/>
>
</el-option>
</el-select>
</template>
@@ -37,7 +38,7 @@ export default {
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
const condition = this.scrollHeight - this.scrollTop - 30 <= this.clientHeight
if (condition) {
binding.value()
}
@@ -58,13 +59,25 @@ export default {
type: Function,
default: null
},
processSelected: {
type: Function,
default: null
},
options: {
type: Array,
default: () => []
default: () => ([])
},
value: {
type: [Array, String, Number, Boolean],
default: () => []
default: () => ([])
},
initial: {
type: Array,
default: () => ([])
},
multiple: {
type: Boolean,
default: true
}
},
data() {
@@ -91,7 +104,13 @@ export default {
const more = !!data.next
return { results: results, pagination: more }
},
vaultOrDefault: this.value || []
defaultProcessSelected: data => {
return data.map(item => {
return { label: item.name, value: item.id }
})
},
valueSafe: [...this.value],
optionsSafe: this.options || []
}
},
computed: {
@@ -101,11 +120,35 @@ export default {
processResultsOrDefault() {
return this.processResults || this.defaultProcessResults
},
optionsOrDefault() {
return this.options || []
processSelectedOrDefault() {
return this.processSelected || this.defaultProcessSelected
},
initialOptions() {
const options = this.processSelectedOrDefault(this.initial)
return options
},
optionsValues() {
return this.optionsSafe.map((v) => v.value)
},
initialValues() {
return this.initialOptions.map(v => v.value)
}
},
watch: {
initialOptions: (newValue) => {
const notInclude = newValue.filter(v => {
return this.optionsValues.indexOf(v.value) === -1
})
this.optionsSafe = [...notInclude, ...this.optionsSafe]
const notIncludeValues = notInclude.map(v => v.value)
this.valueSafe = [...notIncludeValues, ...this.valueSafe]
}
},
mounted() {
if (this.initialOptions) {
this.valueSafe = [...this.initialValues, ...this.valueSafe]
this.optionsSafe = [...this.initialOptions, ...this.optionsSafe]
}
if (this.url) {
this.getOptions()
}
@@ -128,14 +171,13 @@ export default {
},
filterOptions(query) {
this.resetParams()
this.options = []
this.optionsSafe = []
this.params.search = query
this.getOptions()
},
getOptions() {
this.loading = true
const params = this.makeParamsOrDefault(this.params)
console.log(params)
this.$axios.get(this.url, { params: params }).then(resp => {
this.loading = false
const data = this.processResultsOrDefault(resp)
@@ -143,11 +185,12 @@ export default {
this.params.hasMore = false
}
data.results.forEach((v) => {
this.options.push(v)
if (this.optionsValues.indexOf(v.value) === -1) {
this.optionsSafe.push(v)
}
})
}).catch(err => {
console.log(err)
this.options = []
}).then(() => {
this.loading = false
})

View File

@@ -8,7 +8,7 @@
<FormGroupHeader slot="id:phone" title="认证" :line="true" />
</DataForm>
</IBox>
</page>
</Page>
</template>
<script>

View File

@@ -12,7 +12,7 @@
<span>组下用户</span>
</div>
<div>
<Select2 v-model="value" :url="url" />
<Select2 v-model="select2.value" v-bind="select2" />
</div>
</el-card>
</el-col>
@@ -52,23 +52,23 @@ export default {
}
],
cardTitle: '基本信息',
placeholder: '请选择',
url: '/api/v1/users/users/',
value: [
{
label: 'hello',
value: '1a775bbf-6861-4acb-8ae4-2f684794c8cc'
},
{
label: 'test',
value: '4dccdf84-7728-4de0-a507-67c905b3091b'
},
{
label: 'whold',
value: 'c5ec4b91-1fb2-478e-89bc-5a4abc0f9c6c'
}
],
options: []
select2: {
url: '/api/v1/users/users/',
initial: [
{
name: 'hello',
id: '1a775bbf-6861-4acb-8ae4-2f684794c8cc'
},
{
name: 'test',
id: '4dccdf84-7728-4de0-a507-67c905b3091b'
},
{
name: 'whold',
id: 'c5ec4b91-1fb2-478e-89bc-5a4abc0f9c6c'
}
]
},
}
},
computed: {