import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    inserted(el, binding) {
      // 獲取element-ui定義好的scroll盒子
      const SELECTDOWN_DOM = el.querySelector(
        '.el-select-dropdown .el-select-dropdown__wrap'
      )
      SELECTDOWN_DOM.addEventListener('scroll', function () {
        const CONDITION =
          this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          binding.value()
        }
      })
    },
  })
}

import loadMore from './plugins/select'
Vue.use(loadMore)

<el-form-item label="關(guān)聯(lián)案件:">
  <el-select
    v-model="searchParams.caseCode"
    v-loadmore="handleScroll"
    filterable
    remote
    :remote-method="remoteMethod"
  >
    <el-option
      v-for="item in ajList"
      :key="item.caseCode"
      :label="item.caseName"
      :value="item.caseCode"
    >
    </el-option>
  </el-select>
</el-form-item>

export default {
  data() {
    return {
      slectloading: false, //搜索下拉菜單
      ajList: [], //案件數(shù)據(jù)
      total: 0, //案件所有總數(shù)(接口返回)
      dqajtotal: 0, //當(dāng)前案件總數(shù)(每次存儲(chǔ)的長度)
    }
  },
  created() {
    this.getajnewlist() //獲取案件
  },
  methods: {
    handleScroll() {
      console.log('觸底了')
      console.log(this.dqajtotal, this.ajtotal)
      if (this.ajList.length < this.ajtotal) {
        this.slectloading = true
        this.getajnewlist() //獲取案件方法
        this.slectloading = false
      }
    },
    // 獲取案件
    getajnewlist() {
      this.selectfy.page = this.selectfy.page + 1
      console.log('頁碼', this.selectfy.page)
      this.$axios({
        url: 'case/list',
        method: 'GET',
        params: this.selectfy,
      }).then((res) => {
        if (res.code === 2000 && res.data) {
          console.log('獲取成功')
          this.ajtotal = res.data.total
          if (res.data.records && res.data.records.length > 0) {
            res.data.records.forEach((ele) => {
              var idx = this.ajList.findIndex((item) => {
                return item.caseId == ele.caseId
              })
              if (idx == -1) {
                this.ajList.push(ele)
              }
            })
          }
        } else {
          console.log(res.resultStr)
        }
        console.log(res)
      })
    },
    // 關(guān)聯(lián)案件下拉菜單遠(yuǎn)程搜索
    remoteMethod(val) {
      console.log('遠(yuǎn)程搜索', val)
      if (val && val.length > 0) {
        // 有內(nèi)容
        this.slectloading = true
        this.$axios({
          url: 'case/list',
          method: 'GET',
          params: {
            size: 10,
            caseName: val,
          },
        }).then((res) => {
          console.log('遠(yuǎn)程搜索', res)
          this.ajList = res.data.records //案件信息
          this.slectloading = false
        })
      } else {
        this.slectloading = true
        this.$axios({
          url: 'case/list',
          method: 'GET',
          params: {
            size: 10,
          },
        }).then((res) => {
          console.log(res)
          console.log('遠(yuǎn)程搜索', res)
          this.ajList = res.data.records //案件信息
          this.slectloading = false
        })
      }
    },
  },
}