vue实现el-select 触底分页+远程搜索的示例

　　export default {

　　data() {

　　return {

　　slectloading: false, //搜索下拉菜单

　　ajList: [], //案件数据

　　total: 0, //案件所有总数(接口返回)

　　dqajtotal: 0, //当前案件总数(每次存储的长度)

　　}

　　},

　　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)

　　})

　　},

　　// 关联案件下拉菜单远程搜索

　　remoteMethod(val) {

　　console.log('远程搜索', val)

　　if (val && val.length > 0) {

　　// 有内容

　　this.slectloading = true

　　this.$axios({

　　url: 'case/list',

　　method: 'GET',

　　params: {

　　size: 10,

　　caseName: val,

　　},

　　}).then((res) => {

　　console.log('远程搜索', 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('远程搜索', res)

　　this.ajList = res.data.records //案件信息

　　this.slectloading = false

　　})

　　}

　　},

　　},

　　}