• el-select 远程分页搜索(可搜关键字)


    前端页面卡死了...

    一脸懵,什么情况,数据也没有那么大,怎么会卡死呢?先看看这次改了什么,嗯~数据加解密,前端拿到所有数据并进行解密,额~数据加载时间好长~

    嗯 做数据分页吧,滚动加载数据:

    1. <el-select v-model="ruleForm.tag" filterable placeholder="请选择标签名称" size="small" remote v-scroll="val => handleScroll(val,)" :remote-method="searchRemote" @focus="focusValue">
    2. <el-option v-for="item in labelList" :key="item.fieldName" :value="item.fieldName" :label="item.name">el-option>
    3. el-select>
    1. total: 0, // 总条数
    2. pageNo: 1, // 页码
    3. keyWord: null, // 关键字
    4. /**
    5. * 远程搜索
    6. */
    7. searchRemote(query) {
    8. this.keyWord = query;
    9. this.pageNo = 1;
    10. this.businessOwnerOption = [];
    11. this.getBusinessOwnerOption();
    12. },
    13. /**
    14. * 滚动加载
    15. */
    16. handleScroll(val) {
    17. if (val) {
    18. if (this.businessOwnerOption.length === this.total) {
    19. return;
    20. }
    21. this.pageNo += 1;
    22. this.getBusinessOwnerOption();
    23. }
    24. },
    25. /**
    26. * 聚焦
    27. */
    28. focusValue() {
    29. this.pageNo = 1;
    30. this.keyWord = '';
    31. this.getBusinessOwnerOption();
    32. },
    33. getBusinessOwnerOption() {
    34. this.businessOwnerLoading = true;
    35. const params = {
    36. search: this.keyWord || '', // 关键字
    37. current: this.pageNo, // 当前页数
    38. size: 10 // 条数
    39. };
    40. Api.getBusinessOwnerOption(params).then(res => {
    41. if (res.success) {
    42. const {result, totalCount } = res.data
    43. if (!isEmpty(result)) {
    44. // 这里要先对返回的数据进行解密,不然concat数据会有问题
    45. result && result.forEach(element => {
    46. element.email = decryptFn(element.email)
    47. element.nickName = decryptFn(element.nickName)
    48. });
    49. this.businessOwnerOption = uniqBy(this.businessOwnerOption.concat(result), 'email');
    50. this.total = totalCount;
    51. }
    52. }
    53. })
    54. .catch( error =>
    55. console.error(error)
    56. )
    57. },

  • 相关阅读:
    【Python】执行外部命令并获取输出
    百度地图 缩放 0.5 zoomend zoom_changed
    mongodb-批量刷新数据
    C++前缀和算法的应用:统计得分小于K的子数组数目
    【DP+贪心】跳跃游戏
    浏览器事件循环原理 —— 任务优先级
    Arduino从零开始(2)——控制舵机与步进电机
    基于OFDM的水下图像传输通信系统matlab仿真
    桥接模式(结构型)
    uniapp封装loading 的动画动态加载
  • 原文地址:https://blog.csdn.net/NancyFyn/article/details/132812764