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>
相关推荐
代码的奴隶(艾伦·耶格尔)1 分钟前
Hbase的使用
java·前端·hbase
C澒2 分钟前
企业私有前端物料 AI 化集成方案(RAG+DSL2Code)
前端·ai编程
前端 贾公子3 分钟前
uni-app 也能使用 App.vue?解决 uniapp 无法使用公共组件问题
开发语言·前端·javascript
周淳APP4 分钟前
【HTTP之跨域请求以及Cookie携带的限制】
前端·网络·网络协议·http
默 语4 分钟前
TypeScrip+React 全栈生态实战:从架构选型到工程落地,告别开发踩坑
前端·react.js·架构
代码丰6 分钟前
简历保险箱:一款本地存储、快捷填表的 Chrome 简历助手
前端·chrome
SuperEugene7 分钟前
Promise 从入门到实战:同步异步、回调地狱、then/catch/finally 全解
前端·javascript·面试
前端 贾公子8 分钟前
uniapp 小程序获取后端的二进制 保存到手机相册
java·前端·javascript
qq_4371006610 分钟前
echarts图表相关 电量进度图
前端·flask·echarts
Thomas.Sir20 分钟前
Vue 3:现代前端框架的架构革命
前端·vue.js·web·大前端