vant的Picker 选择器

货物类型，两级分类，每列都要有不限选项，数据里没有不限选项，需要做数据变异，而且选择器是通过索引取值的，比较麻烦的地方就是，修改时获取的是类别id，需要在变异的数据中找到对应项并记录其索引

<van-cell-group>
                <van-field
                        readonly
                        clickable
                        name="goodstypeval"
                        :value="goodstypeval"
                        label="货物类型"
                        placeholder="点击选择"
                        v-on:click="columnsGoodsShow"
                ></van-field>
                <van-popup v-model="columnsgoods_show" position="bottom">
                    <van-picker
                            ref="ppkk"
                            title="货物类型"
                            show-toolbar
                            :columns="columnsgoods"
                            v-on:confirm="onConfirmgoods"
                            v-on:cancel="onCancelgoods"
                            v-on:change="onChangegoods"
                    ></van-picker>
                </van-popup>
            </van-cell-group>

变异后的数据格式：

goodstypelist:[
    {
        id: 0,
        text: "不限",
        children:[
             {id: 0,text: "不限"}
        ]
    },
    {
        id: 1,
        text: "农用物资",
        children:[
             {id: 0,text: "不限"},
             {id: 2,text: "农业运输机械"},
             {id: 3,text: "生产及加工机械"},
             ...
        ]
    },
    ...
]

data:

//货物类型
        columnsgoods_show: false,
        goodstypeval:'',//筛选的货物类型值
        CategoryParentID:0,
        CategoryID:0,
        goodstypelistsource:[],//数据源
        goodstypelist:[],//变异后的货物类型表
        columnsgoods: [],//对象数组，配置每一列显示的数据
        suoyin1:[],//索引

方法：

//打开货物类型
        columnsGoodsShow(){
            //console.log(this.suoyin1)
            this.columnsgoods_show = true;
            //如果没有选中过就不走里面
            if(this.suoyin1.length != 0){
                //通过索引拿到数据表中选中的二级类全部数据
                let obj1 = this.columnsgoods[0].values[this.suoyin1[0]]
                //将当前选中的一级类数据和二级类数据赋值给数据表
                this.columnsgoods= [{values: this.columnsgoods[0].values},{values: obj1.children}]
                this.$nextTick(function(){
                    //通过索引在数据表中找到选中的那一项
                    this.$refs.ppkk.setIndexes(this.suoyin1)
                })
            }
        },
//改变货物类型
        onChangegoods(picker, values,index) {
            //values会得到当前选中的一级和二级，因为一级下带有所有的二级，所以在children中找
            picker.setColumnValues(1, values[0].children.filter(item => item.text));

        },
        //货物类型确认按钮
        onConfirmgoods(value, index) {

            //console.log(value, index)
            this.goodstypeval = value[0].text + '-' + value[1].text;
            this.CategoryParentID = value[0].id;//一级id
            this.CategoryID = value[1].id;//二级id
            this.columnsgoods_show = false;
            //将当前选中的索引存起来
            this.suoyin1 = index;
        },
        //选择货物类型取消按钮，这里如果没有别的操作可以把他写到行内v-on:cancel="columnsgoods_show = false"
        onCancelgoods() {
            this.columnsgoods_show = false;
        },
//货物类型
        async goodsCategory(){
            let self = this;
            await getCategoryList(1).then(msg => {
                //console.log(msg.row_data.record,'1')
                if (msg.status.code == 1) {
                    this.goodstypelistsource = msg.row_data.record;//数据源
                    let ary = [{id:0,text:'不限',children:[{id:0,text:'不限'}]}];//初始化就有第一项不限
                    let source = msg.row_data.record;
                    //console.log(source)
                    source.forEach(item => {
                        if(item.ParentID==0){
                            let obj = {};
                            obj.id = item.CategoryID;
                            obj.text = item.CategoryName;
                            ary.push(obj);
                        }
                    });
                    //第一项不限不循环
                    for(let i=1;i<ary.length;i++){
                        let cur = ary[i];
                        ary[i].children = [{id:0,text:'不限'}];
                        source.forEach(item => {
                            if(item.ParentID == cur.id){
                                let obj = {};
                                obj.id = item.CategoryID;
                                obj.text = item.CategoryName;
                                ary[i].children.push(obj);
                            }
                        })
                    }

                    this.goodstypelist = ary;
                    console.log(this.goodstypelist)
                    this.columnsgoods= [{values:this.goodstypelist.filter(item => item.text)},{values:this.goodstypelist[0].children.filter(item => item.text)}];//货物类型数据和初始化
                    //console.log(this.columnsgoods)
                    
                } else {
                    self.$toast(msg.status.msg)
                    return;
                };
            }).catch(msg => {
                console.log(msg)
                //self.$toast(msg)
            })
        },

获取数据：

//获取货物类型
let getCategoryList = (typeID) => {
    return axios.get("/Management/Goods_TruckAttribute_GetList", {
        params: {
            typeID:typeID
        }
    })
};

修改时：从接口得到两个类型id，用双循环找索引，因为用forEach不能中断，我们只要找到想要的，后面不需要再循环了，这一步是在created里完成了suoyin1的赋值，所以在触发展开事件后就能拿到正确的索引打开选中项

this.CategoryParentID = curInfo.CategoryParentID;//货物类型
                    this.CategoryID = curInfo.CategoryID;//货物类型

                    for(let i=0;i<this.goodstypelist.length;i++){
                        let item = this.goodstypelist[i];
                        if(item.id == self.CategoryParentID){
                            this.suoyin1.push(i);
                            for(let j=0;j<item.children.length;j++){
                                let cur = item.children[j];
                                if(cur.id == self.CategoryID){
                                    this.suoyin1.push(j);
                                    break;
                                }
                            }
                            break;
                        }
                    }