前端控件代码
<van-cell-group>
<van-field
readonly
clickable
label="货物类型"
placeholder="点击选择"
v-on:click="columnsgoods_show=true"
></van-field>
<van-popup v-model="columnsgoods_show" position="bottom">
<van-picker
ref="ppkk"
title="货物类型"
show-toolbar
:columns="columnsgoods"
@confirm="onConfirmgoods"
@change="onChange"
></van-picker>
</van-popup>
</van-cell-group>
data代码
columnsgoods_show: false,
columnsgoods: [{
text: "一",
id: "1",
children: [
{
text: "二二",
id: "22",
},
{
text: "一一",
id: "11",
},
],
}, {
text: "二",
id: "2",
children: [
{
text: "三三",
id: "33",
},
{
text: "四四",
id: "44",
},
],
}],
},
确定事触发事件,重点关注value[0],value[1]的值,一些值为了去value而非text
onConfirmgoods(picker, value) {
//value[0]代表第1列索引,value[1]代表第2列索引
console.log("test:", value);
console.log("value:", value[1]);
console.log("main", this.columnsgoods[value[0]].id +"text :"+ this.columnsgoods[value[0]].text);
console.log("children", this.columnsgoods[value[0]].children[value[1]].id + "text :" + this.columnsgoods[value[0]].children[value[1]].text);
}