crm-xcx/pages-question/components/pickerThreeColumn.vue

<!-- 三级联动picker -->
<template>
   <view v-if="visible">
      <view :class="{'pickerMask':visible}" @click="pickerCancel" catchtouchmove="true"></view>
      <view :class="['picker-cont',{'picker-view-show':visible}]">
         <view class="picker-top">
            <view style="color:#999" @click="pickerCancel">取消</view>
            <view style="color:#576b95" @click="pickerEnsure">确认</view>
         </view>
         <picker-view 
            indicator-style="height: 40px;" 
            class="picker-view-cont" 
            :value="value" 
            @change="pickerChangeHandle"
         >
            <picker-view-column>
               <view class="picker-item" v-for="(item,index) in pickerOne" :key="index">{{item.label}}
               </view>
            </picker-view-column>
            <picker-view-column>
               <view class="picker-item" v-for="(item,index) in pickerTwo" :key="index">{{item.label}}
               </view>
            </picker-view-column>
            <picker-view-column>
               <view class="picker-item" v-for="(item,index) in pickerThree" :key="index">
                  {{item.label}}
               </view>
            </picker-view-column>
         </picker-view>
         
      </view>
      
   </view>
</template>

<script>
   export default {
      props:{
         data: {
            type: Array
         },
         visible: {
            type: Boolean
         },
         default_picker_val:{
            type: Array
         }
      },
      watch: {
         visible(newval) {
            newval && this.init()
         },
         default_picker_val(newval) {
            this.val = newval;
         }
      },
      data() {
         return {
            value: [],
            pickerOne:[],
            pickerTwo:[],
            pickerThree: []
         };
      },
      mounted() {
      },
      methods: {
         /* 值改变时 */
         pickerChangeHandle(e) {
            let data = this.data;
            let changeValue = e.detail.value;
            let pickerTwo = [];
            let pickerThree = [];
            // 重新渲染第二列
            // 如果是第一列滚动
            if (changeValue[0] !== this.value[0]) {
               this.pickerTwo = [];
               for (let i = 0, length = data[changeValue[0]].children.length; i < length; i++) {
                  pickerTwo.push(data[changeValue[0]].children[i]);
               }
               // 重新渲染第三列
               for (let i = 0, length = data[changeValue[0]].children[0].children.length; i <
                  length; i++) {
                  pickerThree.push(data[changeValue[0]].children[0].children[i]);
               }
               changeValue[1] = 0;
               changeValue[2] = 0;
               this.pickerTwo = pickerTwo;
               this.pickerThree = pickerThree;
            } else if (changeValue[1] !== this.value[1]) {
               // 第二列滚动
               // 重新渲染第三列
               this.pickerThree = [];
               pickerTwo = this.pickerTwo;
               for (let i = 0, length = data[changeValue[0]].children[changeValue[1]].children
                     .length; i <
                  length; i++) {
                  pickerThree.push(data[changeValue[0]].children[changeValue[1]]
                     .children[
                        i]);
               }
               changeValue[2] = 0;
               this.pickerThree = pickerThree;
            }
            this.value = changeValue;
         },
         
         /* 取消*/
         pickerCancel() {
           this.$emit('cancel') 
         },
         
         /* 确定*/
         pickerEnsure() {
            console.log(this.value)
            let val = this.value;
            if(!this.data[val[0]].children.length ||  !this.data[val[0]].children[val[1]].children.length) return this.pickerCancel();
            
            // this.pickerValueDefault = this.value;
            this.$emit('ensure',this.value)
            this.pickerCancel();
            
         },
         
         init() {
            let pickerOne = [];
            let pickerTwo = [];
            let pickerThree = [];
            // 第一列
            for (let i = 0, length = this.data.length; i < length; i++) {
               pickerOne.push(this.data[i]);
            }
            // 渲染第二列
            this.value = this.default_picker_val.length ? this.default_picker_val : [0, 0, 0];
            let num = this.value[0];
            for (let i = 0, length = this.data[num].children.length; i < length; i++) {
               if( this.data[num].children === 0) {
                  pickerTwo = []
                  return
               }
               pickerTwo.push(this.data[num].children[i]);
            }
            // 第三列
            let numSecond = this.value[1];
            if(this.data[num].children.length) for (let i = 0, length = this.data[num].children[numSecond].children.length; i <
               length; i++) {
               if( this.data[num].children[numSecond].children.length === 0) {
                  pickerThree = []
                  return
               }
               pickerThree.push(
                  this.data[num].children[numSecond].children[i]
               );
            }
            this.pickerOne = pickerOne;
            this.pickerTwo = pickerTwo;
            this.pickerThree = pickerThree;
         }
      }
   }
</script>

<style lang="scss" scoped>

.pickerMask {
   position: fixed;
   z-index: 1000;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
}
.picker-cont {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 250px;
   transition: all 0.5s;
   transform: translateY(100%);
   z-index: 3000;
   background-color: #fff;
   .picker-top {
      display: flex;
      height: 100rpx;
      padding: 0 30rpx;
      justify-content: space-between;
      align-items: center;
   }
}
.picker-view-show {
   transform: translateY(0);
}
.picker-view-cont {
   position: relative;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 238px;
   background-color: rgba(255, 255, 255, 1);
   
   .picker-item {
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #333;
   }
}
</style>