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;
                        }
                    }