更新记录

1.1.3（2024-09-24） 下载此版本

解决数据源异步加载不显示问题

1.1.2（2024-09-11） 下载此版本

修复默认赋值不显示的问题

1.1.1（2024-09-09） 下载此版本

加入默认插槽

平台兼容性

t-tree-checkbox：树形选择组件（VUE3+TS）

1、集成uni-data-picker+uni-data-checkbox组件，树形为父组件，选择框为子组件，采用VUE3+TS

单选展示为下拉框样式；

复选展示为根据名称平铺展示，支持删除；

2、一次性加载使用示例

<t-tree-checkbox placeholder="请选节点" popup-title="请选择节点" :localdata="localdata"
    v-model="formData.list" :map="{text:'name',value:'id'}" multiple>
</t-tree-checkbox>

一次性加载数据源，格式如下：

localdata = [{
        id: '1', 
        name: '节点1', 
        children: [{
            id: '1-1', name: '节点1-1',
            checkboxChildren: [{ id: '1-1-1', name: '复选1' }, { id: '1-1-2', name: '复选2' }]
        }, 
        { id: '1-2', name: '节点1-2' }]
    }, 
    { id: '2', name: '节点2' }]

3、树形和选择框异步使用示例

<t-tree-checkbox placeholder="请选择节点" popup-title="请选择节点" :localdata="localdata"
    v-model="formData.list" :map="{text:'name',value:'id'}" checkboxLazy
    :checkboxLoad="checkboxLoad" multiple>
</t-tree-checkbox>

localdata数据源，格式如下：

localdata = [{
        id: '1', 
        name: '节点1', 
        children: [{
            id: '1-1', name: '节点1-1'
        }, 
        { id: '1-2', name: '节点1-2' }]
    }, 
    { id: '2', name: '节点2' }]

选择框加载函数：checkboxLoad如下

// node:为localdata中选中的节点数据
// resolve:为加载子级选择框数据后的回调函数
const checkboxLoad = async (node : any, resolve : AnyFunction) => {
        let params = {
            id: node.id
        };
        const { list } = await ...(params);
        // list中的text和value字段需和:map设置保持一致
        resolve(list);
    }

4、参数如下

// 接收参数
const props = defineProps({
    modelValue: { type: [Number, Array, String] },
    modelText: { type: [Array, String] }, // 下拉选中文本
    popupTitle: { type: String, default: '请选择' },
    placeholder: { type: String, default: '请选择' },
    localdata: { type: Array },//数据源
    map: {  // 配置数据源中的文本和值字段，同样适用checkboxLoad返回数据
        type: Object,
        default: () => { return { text: 'text', value: 'value' }; }
    },
    resultMap: { type: Object },// multiple为true时起作用，返回结果的字段，默认采用map
    checkboxLazy: { type: Boolean, default: false },//最后一级选择框数据懒加载
    checkboxLoad: { type: Function, default: () => { } },//最后一级选择框数据的加载函数
    checkboxField: { type: String, default: 'checkboxChildren' },//非懒加载时，选择框的数据集合使用字段
    multiple: { type: Boolean, default: false }, // 是否多选，默认单选
    isExist: { type: Boolean, default: false }, // 是否共存（一个节点下既有checkboxChildren数据又有children数据），默认不共存
    existName: { type: String, default: '' }    //共存的后缀名称
})