最终效果
下拉选择框
选择后显示
picker处代码
<picker class="item-picker" mode="multiSelector" range-key="name" @change="classifyChange" @columnchange="columnchange" :value="classifyIndex" :range="classifyArr">
<view class="input_box line">
<view class="name required">拍品分类</view>
<view class="select_info">
<view class="value" v-if="classify2Obj.name || classify1Obj.name">{{classify2Obj.name || classify1Obj.name}}</view>
<view class="select" v-else>请选择拍品分类</view>
</view>
</view>
</picker>
data() {
return {
//获取到的分类信息
classifyArr:[[],[]],
//选择的index
classifyIndex: 99999,
//选择的一级分类
classify1Obj: {},
//选择的二级分类
classify2Obj: {},
};
},
onLoad获取数据
//获取一级分类 以及一级分类第一个的子分类
this.getCategory(0,0);
//这个接口既能获取一级分类也能获取子分类,因此放在一次
async getCategory(pid, column){
try {
let res = await this.$http.get('api/auction/goods/v1/category', {
//pid为0时,获取一级分类
pid: pid
});
//存在一级分类是获取子分类
if(res.length > 0){
// #ifdef H5
this.classifyArr[column] = res;
//不加强制更新h5的值没法变化
this.$forceUpdate();
// #endif
// #ifndef H5
this.$set(this.classifyArr, column, res);
// #endif
//设置的是存在id即为内容回显
if(pid == 0 && !this.id){
await this.getCategory(res[0].objId, 1);
}
} else {
//一级分类没有二级分类的情况 设为空
// #ifdef H5
this.classifyArr[column] = [
// {
// name: "---",
// objId: "",
// }
];
this.$forceUpdate();
// #endif
// #ifndef H5
this.$set(this.classifyArr, column, [
// {
// name: "---",
// objId: "",
// }
]);
// #endif
}
} catch(e){
//TODO handle the exception
}
},
//选择分类,获取分类进行展示
classifyChange(e){
this.classify2Obj = {};
this.classify1Obj = {};
this.classifyIndex = e.detail.value
if (this.classifyArr[1].length != 0) {
this.classify2Obj = this.classifyArr[1][this.classifyIndex[1]];
};
if (this.classifyArr[0].length != 0) {
this.classify1Obj = this.classifyArr[0][this.classifyIndex[0]];
};
},
//一级分类进行选择时,获取二级分类
columnchange(e){
let column = e.detail.column;
if(column == 0){
let value = e.detail.value
let childId = this.classifyArr[0][value].objId;
this.getCategory(childId, 1);
}
},
请求信息