uniapp 使用 uni-data-picker级联选择器，自定义展示，uni小程序

在uniapp中使用uni-data-picker组件进行自定义级联选择时，首先需要准备好级联数据源，然后通过v-model进行数据双向绑定。以下是一个简单的例子：

1. 安装uni-data-picker组件：

npm install uni-data-picker

2. 在页面中引入并注册组件：

import uniDataPicker from 'uni-data-picker'
export default {
  components: {
    uniDataPicker
  },
  data() {
    return {
      pickerValue: [], // 用于存储选中的值
      pickerList: [ // 级联数据
        {
          name: '省份',
          value: '1',
          children: [
            { name: '广东', value: '2' },
            { name: '北京', value: '3' }
          ]
        }
      ]
    }
  }
}

3. 在页面模板中使用组件：

<template>
  <view>
    <uni-data-picker
      :value="pickerValue"
      :localdata="pickerList"
      @change="onChange"
    ></uni-data-picker>
  </view>
</template>

4. 实现onChange事件处理函数，用于响应选择变化：

export default {
  // ...
  methods: {
    onChange(e) {
      console.log('选中的值：', e.value);
      this.pickerValue = e.value;
    }
  }
}

以上代码实现了一个基本的级联选择器，用户可以从pickerList中选择，选择结果会通过pickerValue数组进行存储，同时在控制台输出选中的值。

注意：uni-data-picker组件可能需要适配到小程序的环境，如果在小程序中使用，请确保按照uniapp的文档，将组件注册为全局组件或者在页面中正确引入和注册。