vue封装数据加载组件

根据输入内容，去后台查询相关数据，每次返回20条数据，滑动到底部时增加索引（即页数）再去后台查询数据，将返回数据拼接在原数组后面。

1、封装组件

<template>
  <!-- 搜索组件 -->
  <div >
    <!-- 这里使用的是mint ui里面的表单组件，也可以改成element ui的输入框组件或者表单组件 -->
    <mt-field v-model="name" :disabled="disabled" :label="title" placeholder="模糊查询" @change="queryData" />
      <!-- mint ui中的弹框组件 -->
    <mt-popup
      v-model="showPopup"
      popup-transition="popup-fade">
      <ul ref="materialUl" @scroll="doButtom">
        <li v-for="(item,index) in dataList" :key="index" @click="clickMaterial(item)">{{ item.name }}</li>
      </ul>
    </mt-popup>
  </div>
</template>
<script>
//封装的调用后台的查询接口方法
import { queryMaterial } from '@/api/serve'
export default {
  props: {
  //禁用状态
    disabled: {
      type: Boolean,
      default: false
    },
    //表单的label名  
    title: {
      type: String,
      default: ''
    },
    //绑定值
    name: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      dataList: [],
      showPopup: false,
      pageIndex: 1,
      pageSize: 20
    }
  },
  methods: {
    queryData() {
      const temp = {
        name: this.name,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }
      queryMaterial(temp).then(res => {
      //将返回的res数据拼接在dataList后面
        this.dataList = [...this.dataList, ...res]
        this.showPopup = true
        console.log(res, '搜索返回值this.dataList==>', this.dataList)
      })
    },
    // 给父组件传值   将选择的数据传递给父组件
    clickMaterial(data) {
      this.$emit('selectMaterial', data)
    },
    //监听滚动事件
    doButtom() {
      // Element.scrollTop：元素内容垂直滚动的像素值
      // Element.clientHeight：元素可见区域的整个的高度
      // Element.scrollHeight：这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容
      if (this.$refs.materialUl.scrollTop + this.$refs.materialUl.clientHeight === this.$refs.materialUl.scrollHeight) {
      console.log('触底了')
      //判断是否已经加载完了全部数据，如果已经加载了全部数据  则不再去请求接口获取数据
        if (this.materialList.length < this.pageIndex * 20) return
        this.pageIndex++
        this.queryMaterial()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
ul{
  height:500px;
  overflow-y: scroll;
  font-size: 0.44rem;
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  li{
    display: block;
    padding: 0.285714rem;
    border-bottom: 1px solid #D9D9D9;
  }
}
</style>

2、使用组件

<template>
  <div style="margin-bottom:55px">
  <!-- 使用组件 -->
    <query-material :title="tit1" name="form.name" @selectMaterial="selectMaterial"/>
  </div>
</template>
<script>
//引入组件
import queryMaterial from '@/views/components/queryMaterial/queryMaterial'
export default {
//注册组件
  components: { 'query-material': queryMaterial },
  data() {
    return {
      tit1: '名称',
      form: {
        id: null,
        name: '',
      }
    }
  },
  methods: {
  //接收到子组件传递过来的值  
    selectMaterial(data) {
      console.log(data, '选择的数据')
    },
  }
}
</script>
<style lang='scss' scoped>
@import '@/styles/workOrder.scss';
</style>