van-picker级联设置默认选择

在Vanilla Picker(van-picker)组件中,您可以使用setIndexes方法来设置选择的索引。这个方法可以帮助您在需要时通过编程方式设置选择的值。

复制代码
<template>
  <van-picker
    :columns="columns"
    ref="pickerRef"
  />
  <button @click="setSelectedIndexes">Set Selected Indexes</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const pickerRef = ref(null);
    const columns = [
      {
        values: ['Option 1', 'Option 2', 'Option 3']
      },
      {
        values: ['Suboption 1', 'Suboption 2', 'Suboption 3']
      }
    ];

    const setSelectedIndexes = () => {
      const indexes = [1, 2]; // Set the desired indexes
      pickerRef.value.setIndexes(indexes);
    };

    return {
      columns,
      pickerRef,
      setSelectedIndexes
    };
  }
};
</script>
相关推荐
李永宁11 分钟前
AI 编辑器 + MCP 轻松实现设计稿生成前端代码
前端·mcp·trae
江城开朗的豌豆18 分钟前
Vue的隐形魔法:虚拟DOM和Diff算法如何让页面飞起来?
前端·javascript·vue.js
江城开朗的豌豆26 分钟前
Vue中key值的秘密:为什么这个小东西能让列表渲染更聪明?
前端·javascript·vue.js
tager27 分钟前
为什么推荐使用Whistle而不是Fiddler、Charles!🤗
前端·fiddler·charles
江城开朗的豌豆36 分钟前
Vue 3.0真香!用了半年后我来告诉你为什么这么爽
前端·javascript·vue.js
前端工作日常36 分钟前
我理解的 npm 作用域包
前端
小小小小宇36 分钟前
移动端软键盘弹出问题
前端
小小小小宇37 分钟前
前端常见浏览器兼容性问题
前端
小小小小宇8 小时前
前端并发控制管理
前端
小小小小宇8 小时前
前端SSE笔记
前端