更新记录

1.1.2(2024-09-11) 下载此版本

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

1.1.1(2024-09-09) 下载此版本

加入默认插槽

1.1.0(2024-09-09) 下载此版本

新增结果返回resultMap参数和是否共存参数;

查看更多

平台兼容性

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: '' }    //共存的后缀名称
})

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问