ant-vue封装拉选择+模糊选择组件

ant-vue封装拉选择+模糊选择组件

封装的代码：

Markup

<!--
* @fileName 企业信息列表弹框
* Created by dongwei on 2019/4/18
-->
<template>
    <a-select 
        style="width: 240px;" 
        placeholder="请选择企业名称"
        v-model="searchData.entname"
        :showArrow="true"
        :showSearch="true"
        @change="getEntId"
        @popupScroll="handlePopupScroll"
        :filterOption="filterOption"
        >
        <a-select-option v-for="i in frontDataZ" :key="i.id" :value="i.id">
        {{ i.entName }}
        </a-select-option>
    </a-select>
</template>

<script>

export default {
    name: 'CompanyTableDialog',
    props: {
        isDialogShow: {
            type: Boolean,
            defalut: false
        },
        areaCode: {// 账号对应区域编码
            type: String,
            default: ''
        },
        enterpriseId: {// 企业账号登录时的企业id
            type: Number,
            required: false
        }
    },
    data() {
        return {
            searchData: {// 搜索参数
                entname: undefined,
                entid:''
            },
             // 企业下来数据加载处理
            dataZ: [],//总数据（不会改变）
            frontDataZ: [], //存放前100的数据
            valueData: '',
            treePageSize: 100,
            scrollPage: 1,
        };
    },
     created() {
     this.getEntperise()
     
    },
    methods: {
      // 获取企业信息
      getEntperise(){
        this.axios.get('/entEnterprisearchives/entName')
            .then(res => {
                // console.log(res);
                 // console.log(res);
                for(let i in res){
                  // 总数据
                  this.dataZ.push({
                    id:i,
                    entName:res[i]
                  })
                }
                // 
                this.frontDataZ = this.dataZ.slice(0, 100)
                // console.log("++",this.entList);
            }, () => {

            });
      },
      // 企业搜索
      filterOption(input, option) {
        return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      //下拉框下滑事件
      handlePopupScroll (e) {
        const { target } = e
        const scrollHeight = target.scrollHeight - target.scrollTop
        const clientHeight = target.clientHeight
        // 下拉框不下拉的时候
        if (scrollHeight === 0 && clientHeight === 0) {
          this.scrollPage = 1
          console.log(this.scrollPage)
        } else {
          // 当下拉框滚动条到达底部的时候
          if (scrollHeight < clientHeight + 5) {
            this.scrollPage = this.scrollPage + 1
            const scrollPage = this.scrollPage// 获取当前页
            const treePageSize = this.treePageSize * (scrollPage || 1)// 新增数据量
            const newData = [] // 存储新增数据
            let max = '' // max 为能展示的数据的最大条数
            if (this.dataZ.length > treePageSize) {
              // 如果总数据的条数大于需要展示的数据
              max = treePageSize
            } else {
              // 否则
              max = this.dataZ.length
            }
            // 判断是否有搜索
            if (this.valueData) {
              this.allDataZ.forEach((item, index) => {
                if (index < max) { // 当data数组的下标小于max时
                  newData.push(item)
                }
              })
            } else {
              this.dataZ.forEach((item, index) => {
                if (index < max) { // 当data数组的下标小于max时
                  newData.push(item)
                }
              })
            }

            this.frontDataZ = newData // 将新增的数据赋值到要显示的数组中
          }
        }
      },
      getEntId(value,event){
        console.log(value);
        let str = event.componentOptions.children[0].text.replace(/\s*/g,"");
        this.searchData.entname = str
        this.searchData.entid = value
        this.$emit('confirmTable', this.searchData);
      },
       
    }
};
</script>

<style scoped lang="less">

</style>

使用：

HTML:

Markup

<a-form-item label="企业名称">

                  <enterprise-select ref="select" @confirmTable="getCompanyInfo"></enterprise-select>
</a-form-item>

引用组件:

Markup

import enterpriseSelect from '@/components/enterpriseSelect/enterpriseSelect'
  export default {
    components: {
      STable,
      addForm,
      editForm,
      detailForm,
      enterpriseSelect
    },