可选择任意一级，如图：

级联.gif

未写递归，目前只可选择3级级联。
原来小程序实现不了组件循环调用！！！！！！！

记录：
20200327解决弹窗显示之后屏幕还可以滚动问题。解决：在遮罩层外的view标签上添加catchtouchmove="preventTouchMove"即可。
20200410优化样式显示，有下级的时候才显示列表

<template>
  <div>
    <view class="input_conter" @click="showCascader">
      <view>级联选择器:<input placeholder="请选择级联" :value="value" disabled="true"/></view>
    </view>
    <view :hidden="isShowCascader" class="modal modal-bottom-dialog" catchtouchmove="preventTouchMove">
      <!-- 遮罩层 -->
      <view class="mask" @click="cancel"></view>
      <view class="cascader">
        <!-- 确定取消按钮 -->
        <view class="cascader_header">
          <button @click="cancel" class="cancal">取消</button>
          <button @click="confirm" class="confirm">确定</button>
        </view>
        <!-- 列表 -->
        <view class="scroll_box">
          <scroll-view scroll-x class="scroll_x">
            <view class="nav">
              <!-- 一级 -->
              <view style="width: 100%;">
                <scroll-view scroll-y style="height: 300px;">
                  <radio-group class="radiobox_group" @change="radioChange1">
                    <view v-for="(item1, i) in options1" :key="i" class="border_bottom">
                      <text>{{ item1.label }}</text>
                      <radio :value="item1.value" :checked="item1.checked" color="#0099FF" class="radiobox"/>
                    </view>
                  </radio-group>
                </scroll-view>
              </view>
              <!-- 二级 -->
              <view style="width: 100%;background:#f8f8f8" :hidden="show1">
                <scroll-view scroll-y style="height: 300px;">
                  <radio-group class="radiobox_group" @change="radioChange2">
                    <view v-for="(item2, j) in options2" :key="j" class="border_bottom">
                      <text>{{ item2.label }}</text>
                      <radio :value="item2.value" :checked="item2.checked" color="#0099FF" class="radiobox"/>
                    </view>
                  </radio-group>
                </scroll-view>
              </view>
              <!-- 三级 -->
              <view style="width: 100%;" :hidden="show2">
                <scroll-view scroll-y style="height: 300px;">
                  <radio-group class="radiobox_group" @change="radioChange3">
                    <view v-for="(item3, k) in options3" :key="k" class="border_bottom">
                      <text>{{ item3.label }}</text>
                      <radio :value="item3.value" :checked="item3.checked" color="#0099FF" class="radiobox"/>
                    </view>
                  </radio-group>
                </scroll-view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      options1: [
        {
          value: '0',
          label: '一级1',
          children: [
            {
              value: '0-0',
              label: '二级1-1',
              children: [
                {
                  value: '0-0-0',
                  label: '三级1-1-1'
                },
                {
                  value: '0-0-1',
                  label: '三级1-1-2'
                },
                {
                  value: '0-0-2',
                  label: '三级1-1-3'
                },
                {
                  value: '0-0-3',
                  label: '三级1-1-4'
                }
              ]
            }
          ]
        },
        {
          value: '1',
          label: '一级2',
          children: [
            {
              value: '1-0',
              label: '二级2-1',
              children: [
                {
                  value: '1-0-0',
                  label: '三级2-1-1'
                },
                {
                  value: '1-0-1',
                  label: '三级2-1-2'
                },
                {
                  value: '1-0-2',
                  label: '三级2-1-3'
                },
                {
                  value: '1-0-3',
                  label: '三级2-1-4'
                }
              ]
            },
            {
              value: '1-1',
              label: '二级2-2',
              children: [
                {
                  value: '1-1-0',
                  label: '三级2-2-1'
                },
                {
                  value: '1-1-1',
                  label: '三级2-2-2'
                },
                {
                  value: '1-1-2',
                  label: '三级2-2-3'
                },
                {
                  value: '1-1-3',
                  label: '三级2-2-4'
                },
                {
                  value: '1-1-4',
                  label: '三级2-2-5'
                },
                {
                  value: '1-1-5',
                  label: '三级2-2-6'
                },
                {
                  value: '1-1-6',
                  label: '三级2-2-7'
                },
                {
                  value: '1-1-7',
                  label: '三级2-2-8'
                }
              ]
            }
          ]
        }
      ],
      options2: [],
      options3: [],
      isShowCascader: true, // 是否显示级联弹窗
      val1: '',
      val2: '',
      val3: '',
      id1: '',
      id2: '',
      id3: '',
      value: '',
      id: '',
      // 取消选择，之前的不清空
      oldValue: '',
      oldId: '',
      oldId1: '',
      oldId2: '',
      oldId3: '',
      oldOptions1: [],
      oldOptions2: [],
      oldOptions3: [],
      show1: true, // 是否显示二级
      show2: true // 是否显示三级
    }
  },
  created () {},
  watch: {},
  onShow () {},
  methods: {
    // 一级
    radioChange1 (e) {
      if (e.mp.detail) {
        this.options2 = []
        this.options3 = []
        // this.show1 = false
        this.toFalse(this.options1)
        let id = e.mp.detail.value
        this.options2 = this.recursion(id, this.options1, 1)
      }
    },
    // 二级
    radioChange2 (e) {
      if (e.mp.detail) {
        this.options3 = []
        // this.show2 = false
        this.toFalse(this.options2)
        let id = e.mp.detail.value
        this.options3 = this.recursion(id, this.options2, 2)
      }
    },
    // 三级
    radioChange3 (e) {
      if (e.mp.detail) {
        let id = e.mp.detail.value
        this.toFalse(this.options3)
        this.recursion(id, this.options3, 3)
      }
    },
    // 找到所选的list
    recursion (val, data, type) {
      for (const element of data) {
        if (element.value === val) {
          switch (type) {
            case 1:
              this.val1 = element.label
              this.value = this.val1
              this.id1 = val
              this.id = this.id1
              element.children ? this.show1 = false : this.show1 = true // 显示二级
              break
            case 2:
              this.val2 = element.label
              this.value = this.val1 + '/' + this.val2
              this.id2 = val
              this.id = this.id2
             element.children ? this.show2 = false : this.show2 = true // 显示三级
              break
            case 3:
              this.val3 = element.label
              this.value = this.val1 + '/' + this.val2 + '/' + this.val3
              this.id3 = val
              this.id = this.id3
              break
          }
          element.checked = true // 勾选
          return element.children ? element.children : []
        }
      }
    },
    // 显示级联选择
    showCascader () {
      this.isShowCascader = false
      // 隐藏tabbar
      wx.hideTabBar({
        fail: function () {
          setTimeout(function () {
            wx.hideTabBar()
          }, 500)
        }
      })
    },
    // 取消
    cancel () {
      this.isShowCascader = true
      // 显示tabbar
      wx.showTabBar({
        fail: function () {
          setTimeout(function () {
            wx.showTabBar()
          }, 500)
        }
      })
      // 之前已经选择，不清空
      this.value = this.oldValue ? this.oldValue : ''
      this.id = this.oldId ? this.oldId : ''
      this.toFalse(this.options1)
      this.toFalse(this.options2)
      this.toFalse(this.options3)
      if (this.oldValue) {
        this.options1 = this.oldOptions1
        this.options2 = this.oldOptions2
        this.options3 = this.oldOptions3
        this.toTrue(this.options1, this.oldId1)
        this.toTrue(this.options2, this.oldId2)
        this.toTrue(this.options3, this.oldId3)
      }
    },
    // 确定
    confirm () {
      this.isShowCascader = true
      this.oldValue = this.value
      this.oldId1 = this.id1
      this.oldId2 = this.id2
      this.oldId3 = this.id3
      this.oldId = this.id
      this.oldOptions1 = this.options1
      this.oldOptions2 = this.options2
      this.oldOptions3 = this.options3
    },
    // checked赋值为真，-->勾选
    toTrue (data, id) {
      for (const iterator of data) {
        if (iterator.value === id) {
          iterator.checked = true
        }
      }
    },
    // checked赋值为false，-->取消勾选
    toFalse (data) {
      for (const element of data) {
        element.checked = false
        if (element.children) {
          this.toFalse(element.children)
        }
      }
    }
  },
  mounted () {},
  computed: {}
}
</script>
<style lang='less' scoped>
page {
  background: #f8f8f8;
}
// 弹窗固定在底部
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
.input_conter {
  padding: 10px 0px;
  // position: relative;
  // display: -ms-flexbox;
  // display: flex;
  // input {
  //   position: absolute;
  //   margin: -23px 100px;
  // }
}
// 横向滑动不生效，需在外添加一层
.scroll_box {
  width: 100%;
  height: auto;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  .scroll_x {
    height: 100%;
    width: auto;
    overflow:hidden;
  }
}
// 均分成3列
.nav {
  padding: 10px;
  width:100%;
  // height:100px;
  -webkit-box-orient:horizontal;
  -moz-box-orient:horizontal;
  box-orient:horizontal;
  display:flex;
  view {
    -webkit-box-flex:1;
    -moz-box-flex:1;
    box-flex:1;
    text-align:center;
    line-height:10px;
  }
}
.radiobox_group {
  line-height:2.5;
  .border_bottom {
    width: 90%;
    border-bottom: 1px solid #ddd
  }
  .radiobox {
    margin: 10px;
  }
}
// 遮罩层
.mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .4);
  transition: all .4s ease-in-out 0;
  pointer-events: none;
  opacity: 1;
  pointer-events: auto
}
// 级联选择
.cascader {
  position: absolute;
  width: 100%;
  height: 600rpx;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: all .4s ease-in-out 0;
}
.cascader_header {
  height: 20%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  height: 100rpx;
  padding: 0 20rpx;
}
//  取消
.cancal {
  font-size: 16px;
  font-weight: 400;
  color: #999999;
}
// 确定
.confirm {
  font-size: 16px;
  font-weight: 400;
  color: #08bb5d !important;
}
button {
  background: inherit;
  border: none;
  margin: 0;
}
button:after {
  border-radius: 0rpx;
  border: none;
}
</style>