2021-10-12

最新推荐文章于 2024-07-12 16:38:27 发布

Emperor-c

最新推荐文章于 2024-07-12 16:38:27 发布

阅读量800

点赞数 3

分类专栏： Vue 小程序文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_43486426/article/details/120727437

版权

Vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

小程序

2 篇文章 0 订阅

订阅专栏

本文探讨了如何在UViewPicker组件中实现动态加载多级数据的下拉列表，以解决大数据项目中一次性加载的性能问题。通过代码示例展示了如何根据用户交互动态调整数据范围，减少不必要的API请求，提高用户体验。

摘要由CSDN通过智能技术生成

问题：

1、原有的uview组件库没有动态的获取多级列表数据选择，只能是固定数据的选择

2、项目多级列表数据庞大，一次性获取所有数据不太现实

3、需求就是：能动态的去选择多级数据，减少请求量

话不多说上代码：

html:

<u-picker v-model="showselect"
    mode="multiSelector"
    ref="multiSelector"
    :range="range"
    :defaultSelector="defaultSelector"
    :key="rangeKey"
    @columnchange="columnchange"></u-picker>

data:

 showselect: false,
 range: [
   ['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']
 ],
 rangeKey: 0,
 defaultSelector: [0, 0, 0],

methods:

  showselectAction () {
      this.showselect = true
    },
  columnchange (e) {
      console.log(e)
      let column = e.column, index = e.index;
      this.defaultSelector[column] = index;
      switch (column) {
        case 0:
          switch (index) {
            case 0:
              setTimeout(() => {
                this.range[1] = ['中国', '日本']
                this.range[2] = ['北京', '上海', '广州']
                this.$refs.multiSelector.init()
              }, 500);
              break
            case 1:
              setTimeout(() => {
                this.range[1] = ['英国', '法国']
                this.range[2] = ['伦敦', '曼彻斯特']
                this.$refs.multiSelector.init()
              }, 500);
              break
          }
          break
        case 1: //拖动第2列
          switch (this.defaultSelector[0]) { //判断第一列是什么
            case 0:
              switch (this.defaultSelector[1]) {
                case 0:
                  setTimeout(() => {
                    this.range[2] = ['北京', '上海', '广州']
                    this.$refs.multiSelector.init()
                  }, 500);
                  break
                case 1:
                  setTimeout(() => {
                    this.range[2] = ['东京', '北海道']
                    this.$refs.multiSelector.init()
                  }, 500);
                  break
              }
              break
            case 1:
              switch (this.defaultSelector[1]) {
                case 0:
                  setTimeout(() => {
                    this.range[2] = ['伦敦', '曼彻斯特']
                    this.$refs.multiSelector.init()
                  }, 500);
                  break
                case 1:
                  setTimeout(() => {
                    this.range[2] = ['巴黎', '马赛']
                    this.$refs.multiSelector.init()
                  }, 500);
                  break
              }
              break
          }
          case 2:
          	this.$forceUpdate()
          	break
      }
    },

思路来源

piker源码

在这里插入图片描述
因为在源码中，通过init()方法动态的去刷新了valueArr,这样就可以刷新数据列，在不使用这些方法，我发现不能数据列不能及时的刷新
网上有人多人用的是 this.defaultSelector.splice(1, 1, 0)，这种的，这种的只对同步的数据有作用，对异步请求的数据无作用。