文章目录
- 前言
- 一、el-select 触底分页+远程搜索
-
- 1.封装触底自定义指令
- 2.在 mian.js 引入封装好的自定义指令
- 3.在组件中进行使用
- 总结
前言
大部分情况下使用 el-select 的时候,el-options 中 options 的值都是后端接口给的数据,直接赋值就可以了。但是有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,不仅请求全量数据接口的时候时间会很久,而且赋值完之后整个页面会非常卡。
解决方案:
- 后端将接口改为分页的、前端将el-select下拉框中的数据改为滚动加载
- 后端将接口改为模糊搜索的形式,通过选择器中输入的内容去搜索模糊匹配的数据然后返回;前端使用 elementUI 中el-select的远程搜索
一、el-select 触底分页+远程搜索
触底分页
远程搜索
1.封装触底自定义指令
src目录下创建 select.js,并在main.js中全局引入
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()
}
})
},
})
}
2.在 mian.js 引入封装好的自定义指令
import loadMore from './plugins/select'
Vue.use(loadMore)
3.在组件中进行使用
- html部分
el-form-item label="关联案件:">
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>
- js部分
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
})
}
},
},
}
总结
如果这篇【文章】有帮助到你💖,希望可以给我点个赞👍,创作不易,如果有对前端或者对python感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨🔧 个人主页 : 前端初见
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net