【vant】配合 van-popup 使用 van-picker 多级联动，回显赋默认值 遇到的坑及解决方案

先吐槽一句，van-picker 真心不怎么好用。。。

页面大概是这个样子：

代码结构大概是这个样子：

<!-- 选择 收支类型弹窗 -->
<van-popup ref = "accountTypePopup" v-model="showPicker" position="bottom">
    <van-picker
        ref = "accountTypePopup2"
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        @change="onChange"
        
    />
</van-popup>

methods: {
    // ...
    // 修改 columns 方法
    changeColumns(p_name, name) {
        // p_name 一级分类回显值
        // name 二级分类回显值
        
        // 类型列表
        var typeList =
            this.tabActive === 0
                ? this.expendTypeList
                : this.incomeTypeList;

        // 设置 收支类型选项 columns 的默认值 和 子选项
        this.columns[0]["defaultIndex"] = this.columns[0][
            "values"
        ].findIndex(item => item === p_name);

        this.columns[1]["values"] = typeList[p_name];

        this.columns[1]["defaultIndex"] = this.columns[1][
            "values"
        ].findIndex(item => item === name);
    }
}

期望是：popup弹出后，picker选中用户已经选中的选项

结果是：仅第一次popup弹出后，picker选中用户已经选中的选项，之后的弹出一直展示第一次的列表

查看文档，解决方案是用van-picker的方法：

坑就坑中，组件嵌套（popup套picker），用ref获取不到 picker 实例

咋整？

用调试工具调试了半天发现，picker实例化成DOM元素后，即使隐藏，也仅仅是display:none，不会重新实例化

那就好办了。。。

<!-- 选择 收支类型弹窗 -->
<van-popup ref = "accountTypePopup" v-model="showPicker" position="bottom">
    <van-picker
        ref = "accountTypePopup2"
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        @change="onChange"

        // 这里是新加的 //
        :key = "account_type_value"
        
    />
</van-popup>

添加一个key属性，值为【一级项+二级项】，问题圆满解决！！！

 

各位大神有啥更好的方案，欢迎留言