html
<van-cell-group>
<van-cell title-class="hwms-cell-title" title-width="225rpx" value-class="hwms-cell-content" title="仓库-库位" value="{{warehouseContent}}" bind:click="warehouse" />
</van-cell-group>
<van-popup show="{{show}}" position="bottom" bind:close="hideBottom">
<van-picker bind:change="onChange3" columns="{{ columns }}" confirm-button-text="确认" cancel-button-text="取消" show-toolbar="true" bind:confirm="selectWarehouse" bind:cancel="cancelSelect" />
</van-popup>
js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
show: false,
warehouseContent: '点击选择', //输入框显示的内容
columns: [], //对象数组,配置每一列显示的数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
//请求接口获得返回数据
app.ajaxCall("/test/findAll", "", function (result) {
var data = result.data;//后端返回的数据,见第一部中的json数据格式
if (data.success == 1) {
var citys = data.data;
that.setData({
columns: [{
values: citys, // 设置的第一列的初始值
className: "column1"
},
{
values: citys[0].children,// 设置第二列的初始值
className: "column2"
}
]
});
}
});
},
/**
* 显示选择器
*/
warehouse: function () {
this.setData({ show: true });
},
/**
* 隐藏选择器
*/
cancelSelect() {
this.setData({ show: false });
},
/**
* 选择器确认选择
*/
selectWarehouse(event) {
var storeId = event.detail.value[0].id; //第一列的Id
var storeName = event.detail.value[0].text;//第一列的文字
var placeName = "";//第二列文字
var placeId = '';//第二列Id
var warehouseContent = ""; //选择框显示的文字
if (event.detail.value[1]) {
placeId = event.detail.value[1].id;//第二列的Id
placeName = event.detail.value[1].text;//第二列的文字
warehouseContent = storeName + "-" + placeName;//第一列第二列文字拼接
}else{
warehouseContent = storeName;//第二列没有值只显示第一列文字
}
this.setData({
show: false,
warehouseContent: warehouseContent,
});
},
/**
* 选择器改变选择项触发
*/
onChange3(event) {
const {
picker,
value,
index
} = event.detail;
let ColumnIndex = picker.getColumnIndex(index);
console.log(value);
//改变第一列显示第二列的初识值
picker.setColumnValues(index + 1, value[0].children == null ? '' : value[0].children);
},
})
数据格式为:
{
"success": 1,
"data": [
{
"children": [
{
"id": "11111111",
"text": "特斯拉"
"children":[
"id": "11111111",
"text": "Model Y"
]
}
],
"id": "22222222",
"text": "2"
},
],
"code": "",
"message": ""
}