个人网站wordpress,宁波网站建设信任蓉胜网络好,玉溪市网站建设推广,广东网站建设公司网络服务1) 背景: 老项目翻新时#xff0c;发现一个下拉框数据非常多#xff0c;客户呢#xff0c;希望全部数据一起展示#xff0c;意思就是全部数据一起返回给前端用于展示。但这会造成明显的卡顿。~~明显的不合理! QAQ!~~ 于是压力给到前端#xff0c;查询资料#xff0c;各种… 1) 背景: 老项目翻新时发现一个下拉框数据非常多客户呢希望全部数据一起展示意思就是全部数据一起返回给前端用于展示。但这会造成明显的卡顿。~~明显的不合理! QAQ!~~ 于是压力给到前端查询资料各种搜索最终找到2个解决方案。 1、在el-select下拉框中添加分页组件让用户点击下一页下一页 2、在el-select下拉框中数据触底加载 当然最终选择了第二个方案用户体验会更好。 由于项目中有多个地方使用到 且 可能单个页面中会用到多次为了复用选择了自定义指令的方式去实现。 2) 先来看看实现的效果 3) 思路
触底加载哪个元素滚动触底时加载 承装下拉框中所有元素的容器(.el-scrollbar__wrap)触底时触发方法做什么 触底时继续向后端发请求获取下一页的数据请求回来的数据合并给options
4) 简单的写一下.vue文件代码 接口数据是自己用node写的
后端代码在这里GitHub - stella99888/tao-express: Vue2Express
javascript!-- 下拉框触底加载页面 --templatediv classm-4p第一个select/pel-select v-modelvalue v-loadmoreloadmore :teleportedfalse stylewidth:240pxel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-selectp第二个select/pel-select v-modelvalue v-loadmoreloadmore :teleportedfalse stylewidth:240pxel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-select/div/templatescript setup
import axios from axios;
import { onMounted, reactive, ref } from vueconst list ref([])
const options ref([])
const option ref([])
const value ref([])
const loading ref(false)
let pageData reactive({pageIndex: 1,pageSize: 10
})
onMounted(() {getOptions()
})
const getOptions () {axios.get(http://localhost:9999/getSelectOptions?pageIndex${pageData.pageIndex}pageSize${pageData.pageSize}).then(res {console.log(res.data);if (res.data.length 1) {ElMessage({message: 没有更多数据了...,type: warning,});}const newOptions res.data.map((item) {return { value: item.name, label: item.index }})options.value.push(...newOptions)})
}
// 触底了继续发请求
const loadmore () {pageData.pageIndex pageData.pageIndex 1getOptions()
}
/script
* 注意一下: 1. teleported属性为官网提供是否将下拉列表插入至 body 元素默认值为true插入到body元素中。 这是插入body中的 这是不插入body中的可以对比下 2. 我们需要将其插入body元素中吗如果是单个页面中只出现一个那影响不大如果是多个我们要选中该元素时就很不方便了。 3. 且我们这边使用的是自定义指令的方式指令在el-select元素上teleported为false不插入body时正好可以在自定义指令中使用el.querySelector(.el-scrollbar__wrap)获取滚动的元素。
5) 自定义指令
前端代码在这里GitHub - wwaini/tao-vue3 at release240625
// src/directives/loadmore/index.js
import { debounce } from lodash;export default {mounted(el, binding) {// 不插入body时以下方式可获取元素// 插入body时需要以document.querySelector(.el-scrollbar__wrap)获取let scrollWrap el.querySelector(.el-scrollbar__wrap)// 把监听的方法防抖一下const handle debounce((e) {let scrollDistance scrollWrap.scrollHeight - scrollWrap.scrollTop// 比如此处预留10个像素的位置用于触底if (scrollWrap.clientHeight 10 scrollDistance) {binding.value() // 触底通知一下外界}}, 170)// 绑定监听滚动事件scrollWrap?.addEventListener(scroll, handle)// 方法挂载到元素身上便于解绑时使用el._hanlde handle},unmounted(el, binding) {let scrollWrap document.querySelector(.el-scrollbar__wrap)scrollWrap?.removeEventListener(scroll, el._hanlde)el._hanlde null}
}
// directives/index.js
import loadmore from ./loadmore
// 自定义指令对象用于遍历注册
const directives {loadmore
}
// 批量注册指令并暴露到main.js中去便于注册
export default {install(app) {Object.keys(directives).forEach((key) {app.directive(key, directives[key])})}
}
// main.js
import { createApp } from vue;
import App from ./App.vue;const app createApp(App);// 引入并使用自定义指令
import directive from ./directives
app.use(directive);app.mount(#app);
// src/views/num/six.vue!-- 下拉框触底加载自定义指令 --templatediv classm-4p第一个select/pel-select v-modelvalue v-loadmoreloadmore :teleportedfalse stylewidth:240pxel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-selectp第二个select/pel-select v-modelvalue v-loadmoreloadmore :teleportedfalse stylewidth:240pxel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-select/div/templatescript setup
import axios from axios;
import { onMounted, reactive, ref } from vueconst list ref([])
const options ref([])
const option ref([])
const value ref([])
const loading ref(false)
let pageData reactive({pageIndex: 1,pageSize: 10
})
onMounted(() {getOptions()
})
const getOptions () {axios.get(http://localhost:9999/getSelectOptions?pageIndex${pageData.pageIndex}pageSize${pageData.pageSize}).then(res {console.log(res.data);if (res.data.length 1) {ElMessage({message: 没有更多数据了...,type: warning,});}const newOptions res.data.map((item) {return { value: item.name, label: item.index }})options.value.push(...newOptions)})
}
// 触底了继续发请求
const loadmore () {pageData.pageIndex pageData.pageIndex 1getOptions()
}/script如有不足欢迎指正。
不要忽视你达成的每个小目标它是你前进路上的垫脚石。冲
