码迷,mamicode.com
首页 > 其他好文 > 详细

colorui picker 自定义多列选择器

时间:2020-03-05 13:36:03      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:eth   bre   var   div   定义   range   load()   ==   view   

<view class="cu-form-group margin-top">
                <view class="title">传感器</view>
                <picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
                    <view class="picker">
                        {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
                    </view>
                </picker>
            </view>
<script>
    export default {
        data() {
            return {
                multiArray: [
                    [],
                    [],
                    []
                ],
                objectMultiArray: [{
                        name:‘长江农场‘,
                        dept:[
                            {
                            name:‘蔬菜大棚‘,
                            product:[
                                {
                                    name:‘传感器‘
                                },{
                                    name:‘湿度‘,
                                }
                            ]
                        }
                        ]
                    },{
                        name:‘汉阳示范农场‘,
                        dept:[
                            {
                            name:‘水果大棚‘,
                            product:[
                                {
                                    name:‘温度‘
                                },{
                                    name:‘压力‘,
                                }
                            ]
                            },
                            {
                            name:‘养殖场‘,
                            product:[
                                {
                                    name:‘水电‘
                                },{
                                    name:‘压力‘,
                                }
                            ]
                            },
                        ]
                    }
                ],
                multiIndex: [0, 0, 0],
            };
        },
        onLoad() {
            for (var i = 0; i < this.objectMultiArray.length; i++) {
                this.multiArray[0].push(this.objectMultiArray[i].name);
            }
            for (var j = 0; j < this.objectMultiArray[this.multiIndex[0]].dept.length; j++) {
                this.multiArray[1].push(this.objectMultiArray[this.multiIndex[0]].dept[j].name);
            }
            for (var k = 0; k < this.objectMultiArray[this.multiIndex[0]].dept[this.multiIndex[1]].product.length; k++) {
                this.multiArray[2].push(this.objectMultiArray[this.multiIndex[0]].dept[this.multiIndex[1]].product[k].name);
            }
            
        },
        methods: {
            PickerChange(e) {
                this.index = e.detail.value
            },
            MultiChange(e) {
                this.multiIndex = e.detail.value
            },
            MultiColumnChange(e) {
                let data = {
                    multiArray: this.multiArray,
                    multiIndex: this.multiIndex
                };
                data.multiIndex[e.detail.column] = e.detail.value;
                switch (e.detail.column) {
                    case 0:
                        data.multiIndex[1] = 0;
                        data.multiIndex[2] = 0;
                        let result = this.searchColumn();
                        data.multiArray[1] = result[0]
                        data.multiArray[2] = result[1]
                        break;
                    case 1:
                        data.multiIndex[2] = 0;
                        data.multiArray[2] = this.searchColumn()[1]
                        break;
                }
                this.multiArray = data.multiArray;
                this.multiIndex = data.multiIndex;
            },
            searchColumn(){
                var arr1 = [];
                var arr2 = [];
                for (var i = 0; i < this.objectMultiArray.length; i++) {
                    if(i == this.multiIndex[0]){
                        for (var j = 0; j < this.objectMultiArray[i].dept.length; j++) {
                            arr1.push(this.objectMultiArray[i].dept[j].name);
                            if (j == this.multiIndex[1]) {
                                for (var k = 0; k < this.objectMultiArray[i].dept[j].product.length; k++) {
                                    arr2.push(this.objectMultiArray[i].dept[j].product[k].name);
                                }
                            }
                        }
                    }
                }
                return [arr1,arr2];
            },
            CheckboxChange(e) {
                var items = this.checkbox,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    items[i].checked = false;
                    for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
                        if (items[i].value == values[j]) {
                            items[i].checked = true;
                            break
                        }
                    }
                }
            }
        }
    }
</script>

colorui picker 自定义多列选择器

标签:eth   bre   var   div   定义   range   load()   ==   view   

原文地址:https://www.cnblogs.com/ssx314/p/12419571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!