123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <template>
- <div>
- <el-select
- v-model="value"
- ref="select"
- placeholder="请输入姓名"
- clearable
- filterable
- remote
- multiple
- :disabled="disabled"
- :remote-method="remoteMethod"
- @change="onChange">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- <el-option v-if="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
- </el-select>
- </div>
- </template>
- <script>
- export default {
- name: 'user-component',
- props: {
- userIds: {
- type: Array,
- default: () => []
- },
- disabled: {
- type: Boolean,
- default: false
- }
- },
- data () {
- return {
- value: [],
- current: 1,
- size: 10,
- name: '',
- options: [],
- loading: false,
- noMore: false
- }
- },
- watch: {
- userIds (value) {
- this.value = value
- }
- },
- mounted () {
- this.init()
- },
- methods: {
- async init () {
- this.getList()
- },
- remoteMethod (query) {
- this.options = []
- this.current = 1
- this.name = query
- this.getList()
- },
- getList () {
- this.$http({
- url: this.$http.adornUrl(`/user-service/user/list`),
- method: 'get',
- params: this.$http.adornParams({
- 'current': this.current,
- 'size': this.size,
- 'name': this.name
- })
- }).then(({data}) => {
- if (data && data.code === '200') {
- if (this.current > data.data.pages) {
- return
- }
- if (data.data.records.length < 10) {
- this.noMore = false
- } else {
- this.noMore = true
- }
- data.data.records.forEach(item => {
- this.options.push({
- label: item.name + ' (' + item.orgName + ')',
- value: item.userId
- })
- })
- } else {
- this.options = []
- }
- })
- },
- handleClick () {
- this.loadMore()
- },
- loadMore () {
- this.current ++
- this.getList()
- },
- onChange (item) {
- this.$emit('change', item)
- }
- }
- }
- </script>
- <style scoped>
- .el-select{
- width: 100%;
- }
- </style>
|