多列选择器
mode = multiSelector
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
range | 二维 Array / 二维 Array<Object> | [] | mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[[“a”,“b”], [“c”,“d”]] |
range-key | String | 当 range 是一个二维 Array<Object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | |
value | Array | [] | value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始) |
@change | EventHandle | value 改变时触发 change 事件,event.detail = {value: value} | |
@columnchange | EventHandle | 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 | |
@cancel | EventHandle | 取消选择时触发(快手小程序不支持) | |
disabled | Boolean | false | 是否禁用(快手小程序不支持) |
<picker class="jui-flex1" mode="multiSelector" :value="pickerIndex" :range="pickerData" range-key="userName" @change="pickerChange" @columnchange="pickerColumnchange">
<text>{{driverData[1][driverIndex[1]].userName}}</text>
</picker>
<script>
export default {
data(){
return {
pickerIndex:[0,0],
pickerData:[[{vluae: 0, userName: '常用司机'},{vluae:1, userName: '全部司机'}]],//司机列表数据,二维数组,第一个数组表示第一列,第二个数组表示第二列
pickerColumnData:[[{id:1,userName:'张三'}],[{id:2,userName:'李四'},{id:3,userName:'王五'},{id:4,userName:'赵六'}]],
}
},
mounted(){
//默认展示常用司机
this.pickerData[0]=[{vluae: 0, userName: '常用司机'},{vluae:1, userName: '全部司机'}];
this.pickerData[1] = this.pickerColumnData[0];
},
methods: {
//选择
pickerChange(e){
this.pickerIndex= e.detail.value;
},
//某一列值改变,app及h5需使用两种不同的方法改变第二列值
pickerColumnchange(e){
if( e.detail.column == 0 ){
// #ifndef APP-PLUS
this.pickerData[1] = this.pickerColumnData[e.detail.value];
// #endif
// #ifdef APP-PLUS
this.pickerData.splice(1, 1,this.pickerColumnData[e.detail.value]);
// #endif
}
},
}
}