Vant picker组件多列联动

等下吃什么？

已于 2022-07-30 15:38:48 修改

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： Vant

于 2022-07-30 15:37:44 首次发布

本文链接：https://blog.csdn.net/weixin_44240581/article/details/126072688

版权

Vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

本文介绍了一个使用Vue的van组件实现的下拉选择器动态更新功能。在滚动选择时，根据选中项动态改变后续列的值，并调整列中选项的禁用状态，具体涉及van-popup、van-picker组件及其change、confirm、cancel事件的处理。

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

效果

主要就是在滚动选择时，动态改变column的值

在这里插入图片描述

代码

<van-popup
	:show="data.showConfig"
	position="bottom"
	round
	:close-on-click-overlay="false"
>
	<van-picker
	    title="人脸检测器配置"
	    :columns="data.columns"
	    @confirm="selectHandle"
	    @cancel="data.showConfig = false"
	    @change="handleColumnDisabled"
	/>
</van-popup>

const data = reactive({
	columns: [
	  {
	    values: [
	      { text: 'SSD', value: 'SSD' },
	      { text: 'Tiny', value: 'Tiny' }
	    ],
	    defaultIndex: 1
	  },
	  {
	    values: [
	      { text: '0.1', value: 0.1 },
	      { text: '0.2', value: 0.2 },
	      { text: '0.3', value: 0.3 },
	      { text: '0.4', value: 0.4 },
	      { text: '0.5', value: 0.5 },
	      { text: '0.6', value: 0.6 },
	      { text: '0.7', value: 0.7 },
	      { text: '0.8', value: 0.8 },
	      { text: '0.9', value: 0.9 },
	    ],
	    defaultIndex: 4
	  },
	  {
	    values: [
	      { text: '128', value: 128 },
	      { text: '160', value: 160 },
	      { text: '224', value: 224 },
	      { text: '320', value: 320 },
	      { text: '416', value: 416 },
	      { text: '512', value: 512 },
	      { text: '608', value: 608 }
	    ],
	    defaultIndex: 3
	  }
	]
})

  // 控制人脸检测器选项
  const handleColumnDisabled = (allSelected, rowIndex) => {
    if (rowIndex === 0) {
      data.columns[2].values =
        allSelected[0].value === 'SSD'
          ? data.columns[2].values.map(item => ({ ...item, disabled: true }))
          : data.columns[2].values.map(item => ({ ...item, disabled: false }))
    }
  };