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

clickable

name="goodstypeval":value="goodstypeval"label="货物类型"placeholder="点击选择"v-on:click="columnsGoodsShow"

>

:columns="columnsgoods"v-on:confirm="onConfirmgoods"v-on:cancel="onCancelgoods"v-on:change="onChangegoods"

>

变异后的数据格式：

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

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

let item= this.goodstypelist[i];if(item.id ==self.CategoryParentID){

this.suoyin1.push(i);for(let j=0;j

let cur=item.children[j];if(cur.id ==self.CategoryID){

this.suoyin1.push(j);break;

}

}break;

}

}