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>
相关推荐
专注VB编程开发20年36 分钟前
JS检测htm哪个子节点的内容被修改addEventListener(‘input‘, (event)
前端·html5·js
凉生阿新37 分钟前
【React】Hooks useReducer 详解,让状态管理更可预测、更高效
前端·react.js·前端框架
a181001_1 小时前
自制简易html指南针
前端·html·html5
BillKu2 小时前
Vue3取消网络请求的方法(AbortController)
前端·javascript·vue.js
海天胜景3 小时前
c# list<T> 合并
前端·c#
陈奕昆4 小时前
【LLaMA-Factory实战】Web UI快速上手:可视化大模型微调全流程
前端·ui·llama·大模型微调实战
Jedi Hongbin4 小时前
echarts自定义图表--柱状图-横向
前端·javascript·echarts
Yan-英杰5 小时前
npm error code CERT_HAS_EXPIRED
服务器·前端·数据库·人工智能·mysql·npm·node.js
哈希茶馆7 小时前
前端工程化利器:Node.js 文件匹配库 fast-glob 完全指南——比传统方案快 350% 的「文件搜索神器」
运维·前端·javascript·npm·node.js·全文检索·运维开发
zhangguo20027 小时前
react18基础速成
前端·javascript·react.js