mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-18 16:32:28 +00:00
[update] 修改select2
This commit is contained in:
@@ -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
|
||||
})
|
||||
|
@@ -8,7 +8,7 @@
|
||||
<FormGroupHeader slot="id:phone" title="认证" :line="true" />
|
||||
</DataForm>
|
||||
</IBox>
|
||||
</page>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@@ -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: {
|
||||
|
Reference in New Issue
Block a user