小程序实现四级级树形选择菜单

要实现四级级树形选择菜单，可以使用小程序的递归组件和级联选择器组件。递归组件是一种可以在自身模板中调用自身模板的组件，可以用于处理树形结构的数据。级联选择器组件可以实现多级联动选择。

首先，需要定义一个自定义组件，用于渲染每个菜单项。组件的模板中应该包含菜单项的文本和子菜单的递归组件，以及级联选择器组件。例如：

<template name="menu-item">
  <picker-view class="menu-item" bindchange="onPickerChange" value="{{value}}" range="{{range}}">
    <picker-view-column>
      <view wx:if="{{item && item.text}}">
        <text>{{item.text}}</text>
      </view>
      <view wx:if="{{!item || !item.text}}">
        <text>请选择</text>
      </view>
    </picker-view-column>
    <view wx:if="{{item.children}}">
      <recursion name="menu-item" data="{{item.children}}" />
    </view>
  </picker-view>
</template>

然后，在页面中使用递归组件和级联选择器组件来渲染四级菜单。递归组件的 data 属性应该传入树形数据的根节点，级联选择器的 value 属性应该绑定到页面的 data 中，用于记录当前选择的菜单项。例如：

<view class="page">
  <recursion name="menu-item" data="{{treeData}}" />
  <picker-view class="menu-item" bindchange="onPickerChange" value="{{value}}" range="{{range}}">
    <picker-view-column wx:for="{{levels}}" wx:key="{{item}}">
      <view wx:for="{{item}}" wx:key="{{index}}">
        <view class="picker-item">{{item}}</view>
      </view>
    </picker-view-column>
  </picker-view>
</view>

最后，在递归组件的 js 文件中，需要声明组件的名字和数据类型，并且在组件的 onLoad 函数中获取父组件传递过来的数据。在级联选择器的事件处理函数中，需要根据选择的菜单项更新页面的 value 和 range 数据，以及触发自定义事件向页面传递选择的值。例如：

Component({
  name: 'recursion',
  properties: {
    name: String,
    data: {
      type: Object,
      value: null,
      observer: function(newVal, oldVal) {
        // 数据变化时重新渲染
        this.setData({
          data: newVal
        })
      }
    }
  },
  onLoad: function() {
    // 获取父组件传递过来的数据
    const data = this.data.data
    if (data && data.length > 0) {
      this.setData({
        data: data
      })
    }
  },
  methods: {
    onPickerChange: function(event) {
      const value = event.detail.value
      const levels = this.getLevelsData()
      const selectedValues = []
      for (let i = 0; i < levels.length; i++) {
        const index = value[i]
        const items = levels[i]
        if (index >= 0 && index < items.length) {
          const item = items[index]
          selectedValues.push(item)
        } else {
          selectedValues.push('')
        }
      }
      this.triggerEvent('change', {
        value: selectedValues
      })
      this.setData({
        value: value
      })
    },
    getLevelsData: function() {
      const data = this.data.data
      const levels = []
      let currentLevel = data
      while (currentLevel.length > 0) {
        levels.push(currentLevel.map(item => item.text))
        currentLevel = currentLevel[0].children || []
      }
      return levels
    }
  }
})

这样就可以实现一个四级级树形选择菜单的小程序组件了。