更新记录

1.2.0（2025-08-18） 下载此版本

1.新增item右侧图标，并新增控制其显示的参数和逻辑 2.修复懒加载时，没有下一级过后还会tab还会出现子级选择的问题。

1.1.0（2025-08-11） 下载此版本

1.新增了右上角关闭按钮，可以通过closeBtn，控制是否显示按钮。 2.新增了样式自定义功能，采用css变量的形式，可自行覆盖部分样式。注意：样式的默认值使用的是uni.scss中的变量，如果删除里面的变量，会导致组件报错。

1.0（2025-08-08） 下载此版本

上传1.0版本

平台兼容性

uni-app(4.07)

使用说明

插件功能介绍

级联选择，可任意级别选择，不必非要选择到最后一级。
提供了禁用功能，可以控制每一项是否可选。

数据源

可以是本地数据，也支持懒加载，可以自行定义加载方法。
本地数据和懒加载任选一个，不能同时使用。 使用本地数据时，必须时树形结构，字段可以通过props自行配置。

API

属性

props属性

事件（Events）

方法（Methods)

插槽（Slots)

自定义样式

使用样例

<view  @click="show">
  打开
</view>

 <nianDataPickerVue ref="nianDataPickerVue" title="请选择区域" tabDefaultLabel="搞快点" @confirm="confirm" :loadData="loadData" :props="props">
  <template v-slot:title>
    请选择内容
  </template>
  <template v-slot:item="{ data }">
    {{ data.text }}
  </template>
</nianDataPickerVue>

<!-- 对于新增的css变量，可以自行写到style标签里面；也可以放到style属性中，放到属性中时，可以js更灵活的控制 -->
<nianDataPickerVue ref="nianDataPickerVue" @confirm="changeData" :data="list" :props="props"
  style="--container-height: 60%;--base-color: #000;--border-radius: 20px;--container-background: #fff;--background: rgba(255,255,0,.5);--close-bg-color: rgba(222,0,0,.74);--header-border-bottom: 1px solid #eee;" />

/**
 * 点击选中某一项过后，调用加载子集的回调，初始化时会自己调用该函数，data为null
 * @param {Object} data 点击选中的项目
 * @param {Object} list 选中的所有项目数组
 */
loadData(data, list) {
  return new Promise(res => {
    if (data) {
      res([
        {
          id: data.id + 1,
          text: data.id + 1 + '附加费凉快的',
          disabled: data.id + 1 > 2
        }
      ]);
    } else {
      res([{
        id: 1,
        text: '都看见'
      }])
    }
  })
},
/**
 * 打开
 */
show() {
  this.$refs.nianDataPickerVue.show();
},
/**
 * 点击确定的回调
 * @param {Object} list 选择的数据
 */
confirm(list) {
  console.log(list);
},