mpvue 组件踩坑笔记 van-picker动态设置选中项

最新推荐文章于 2026-04-20 09:48:52 发布

原创最新推荐文章于 2026-04-20 09:48:52 发布 · 4.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #小程序

mpvue 专栏收录该内容

7 篇文章

订阅专栏

在使用mpvue开发小程序时，遇到van-picker组件在多列联动选择职业后，再次打开未正确显示选中项和位置错位的问题。通过研究，解决方案是使用定时器配合`picker.setIndexes(index)`方法来设置正确的索引，确保组件状态更新。欢迎有更好方法的大神交流指导。

最近在弄vant-picker多列选择职业分类且联动的效果，出现的问题：点击确定后，再次选择职业，picker选择器并未选中之前的选择项，而且还错位了；点击取消按钮也是出现同种现象。
代码如下：

<van-cell title="底部弹出" is-link @click="showBottom" />
    <van-popup
    :show="bottom"
    position="bottom"
    custom-style="height: 80%"
    @close="hideBottom"
  >
    <van-picker id="picker1" :columns="columns" @change="onChange" value-key="name" @confirm="getValue" show-toolbar @cancel="getValue"/>
  </van-popup>

设置职业数组，也可通过后台接口获取职业分类数组
const addrData = [
  {
    id: 1,
    name: '一级职业',
    children: [
      {
        id: 11,
        name: '二级职业1',
        children: [
          {id: 111, name: '三级职业1'},
          {id: 112, name: '三级职业2'},
          {id: 113, name: '三级职业3'}
        ]
      },
      {
        id: 12,
        name: '二级职业2',
        children: [
          {id: 121, name: '三级职业21'},
          {id: 122, name: '三级职业22'},
          {id: 123, name: '三级职业23'}
        ]
      },
      {
        id: 12,
        name: '二级职业3',
        children: [
          {id: 121, name: '三级职业31'},
          {id: 122, name: '三级职业32'},
          {id: 123, name: '三级职业33'}
        ]
      }
    ]
  },
  {
    id: 2,
    name: '一级职业2',
    children: [
      {
        id: 21,
        name: '二级职业21',
        children: [
          {id: 211, name: '三级职业211'},
          {id: 211, name: '三级职业212'},
          {id: 211, name: '三级职业213'}
        ]
      },
      {
        id: 21,
        name: '二级职业22',
        children: [
          {id: 211, name: '三级职业221'},
          {id: 211, name: '三级职业222'},
          {id: 211, name: '三级职业223'}
        ]
      }
    ]
  }
]
在mpvue定义picker数组：
columns: [
  {
    values: addrData,
    className: 'column1'
  },
  {
    values: addrData[0].children,
    className: 'column2',
    defaultIndex: 0
  },
  {
    values: addrData[0].children[0].children,
    className: 'column3',
    defaultIndex: 0
  }
]

联动方法：

onChange (event) {
   console.log(event)
   const {picker, value, index} = event.target
   if (index === 0) {
     picker.setColumnValues(1, value[0].children)
     picker.setColumnValues(2, value[0].children[0].children)
   } else if (index === 1) {
     picker.setColumnValues(2, value[1].children)
   } else if (index === 2) {
     picker.setColumnValues(2, value[1].children)
   }
 }

就这样，多列职业分类联动就搞定了，但是这样会出现一个问题：点击确定后，再次选择职业，picker选择器并未选中之前的选择项，而且还错位了；点击取消按钮也是出现同种现象。
研究了一段时间，处理方法如下：

点击确定按钮的时候，保存下选中项的index
getValue (event) {
   event.stopPropagation()
    console.log(event)
    const {value, index} = event.target
    console.log(value, index)
    this.valueIndex = index
    this.hideBottom()
  }

重新赋值职业分类数组，并调用picker实例方法设置选中索引号
showBottom () {
  console.log(addrData)
  if (this.valueIndex.length !== 0) {
    let index = this.valueIndex
    this.columns = [
      {
        values: addrData,
        className: 'column1'
      },
      {
        values: addrData[index[0]].children,
        className: 'column2',
        defaultIndex: 0
      },
      {
        values: addrData[index[0]].children[index[1]].children,
        className: 'column3',
        defaultIndex: 0
      }
    ]
    const picker = this.$mp.page.selectComponent('#picker1')
    setTimeout(() => {
      picker.setIndexes(index)
    }, 100)
  }
  this.bottom = true
}

注意：
（1）在mpvue框架中，获取小程序的组件使用的方法是：const picker = this.$mp.page.selectComponent(’#picker1’)
（2）picker.setIndexes(index)设置索引号必须要放在定时器方法内，否则没效果。

若哪位大神有更好的方法，欢迎留言指导，谢谢！