ant for vue 的select懒加载、下拉框样式、远程搜索等

物料选择公共组件

<template>

  <a-select

    show-search

    allowClear

    :disabled="disabled"

    placeholder="请选择物料"

    option-filter-prop="children"

    style="width: 100%"

    v-model="newId"

    :dropdownClassName="'width: 300px'"

    :dropdownMatchSelectWidth="false"

    :filter-option="false"

    @popupScroll="(e) => { companyScroll(e) }"

    @search="queryOnePageData"

    @change="selectChange"

    optionLabelProp="label"

  >

    <a-select-option v-for="item in data" :key="item.id" :value="item.id" :label="item.no">

      {{ item.itemType ? item.itemType.name : '' + ' / ' }}

      {{ item.no + ' / ' + item.name + ' / ' + item.specifiCation }}

    </a-select-option>

  </a-select>

</template>

<script>

import { getItemList } from '@/api/basicDataApi/MaitemsApi'

export default {

  data () {

    return {

      data: [],

      newId: this.id,

      baseDto: {

        pageIndex: 1,

        pageSize: 100

      },

      pageCount: 0,

      totalCount: 0,

      queryParam: ''

    }

  },

  watch: {

    newId: function (newVal, oldVal) {

      if (newVal === oldVal) return

      this.$emit('change', newVal)

    },

    id: function (newVal, oldVal) {

      this.newId = newVal

    }

  },

  model: {

    prop: 'id', // 要存在于proops

    event: 'change' // 当组件的值发生改变时要emit的事件名

  },

  props: {

    id: { type: String, default: '' },

    disabled: { type: Boolean, default: false }

  },

  methods: {

    selectChange (value) {

      this.newId = value

    },

    companyScroll (e) {

      const { target } = e

      var total = target.scrollTop + target.offsetHeight

      var scrollHeight = target.scrollHeight

      console.log('total：' + total, 'scrollHeight：' + scrollHeight)

      // this.scrollPage是当前页 this.totalCount是总条数

      console.log(total >= scrollHeight - 1, total < scrollHeight + 1, this.baseDto.pageIndex <= this.pageCount)

      if (total >= scrollHeight - 1 && total < scrollHeight + 1 && this.baseDto.pageIndex <= this.pageCount) {

        if (this.baseDto.pageIndex >= this.pageCount) {

          this.$notification.error({ message: '已加载所有数据' })

        } else {

          this.baseDto.pageIndex += 1

          this.queryData()

        }

      }

    },

    queryData () {

      getItemList({ baseDto: this.baseDto, queryParam: this.queryParam })

        .then(res => {

          this.data = res.data.data

          this.pageCount = res.data.pageCount

          this.totalCount = res.data.totalCount

        })

        .catch(() => {

          this.$notification.err({ message: '物料数据加载失败，请刷新页面后重试' })

        })

    },

    queryOnePageData (e) {

      if (e) {

        this.queryParam = e

        this.baseDto.pageIndex = 1

        this.queryData()

      } else {

        this.queryParam = ''

      }

    }

  },

  created () {

    this.newId = this.id

    this.queryData()

  }

}

</script>

标红的label是选择后选择框回显显示的内容；

橙色的是远程搜索，每次搜索都是第一页的数据；

绿色的是下拉滚动事件；判断滚动到最低就查询下一页的数据。

黄色的是下拉框样式