更新记录

1.0.2（2025-02-20） 下载此版本

插件下载应用测试完成，功能都正常，完成文档

1.0.1（2025-02-19） 下载此版本

规范语法

1.0.0（2025-02-19） 下载此版本

代码和文档还在撰写中，敬请期待

平台兼容性

引用样例

<template>
    <view class="vrapile-content-001">
        <view class="vrapile-content-001-tree">
            <vrapile-tree ref="vrapileTreeRef" :defaultProps="defaultProps" 
                :data="treeList" :divider="true" :unfold="true"
                :edit="true" @node-click="nodeClick" @add-item="addNode" 
                @edit-item="editNode" @long-press="longPressNode">
            </vrapile-tree>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                treeList: [
                    { id: "A01", parentId: "0", label: "A01-全部", name: "全部", level: 1, lastFlag: 0, orderNum: 1, children: [
                        { id: "A01001", parentId: "A01", label: "A01001-架构师题库", name: "架构师题库", level: 2, lastFlag: 0, orderNum: 1, children: [
                            { id: "A01001001", parentId: "A01001", label: "A01001001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 11, children: []},
                            { id: "A01001002", parentId: "A01001", label: "A01001002-题库二", name: "题库二", level: 3, lastFlag: 1, orderNum: 12, children: []}
                        ]},
                        { id: "A01003", parentId: "A01", label: "A01003-大数据AI题库", name: "大数据AI题库", level: 2, lastFlag: 0, orderNum: 13, children: [
                            { id: "A01003001", parentId: "A01003", label: "A01003001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 1, children: []}
                        ]},
                        { id: "A01004", parentId: "A01", label: "A01004-驾照考试题库", name: "驾照考试题库", level: 2, lastFlag: 0, orderNum: 4, children: []},
                    ]}
                ],

                defaultProps: { id: "id", children: "children", label: "name" },
            };
        },  
        onShow(){
        },
        methods: {
            //节点单击事件
            nodeClick(e) {
                console.log("单击事件：" + JSON.stringify(e))
            },
            //节点新增点击事件
            addNode(e) {
                console.log("新增按钮点击事件：" + JSON.stringify(e))
            },
            //节点修改点击事件
            editNode(e) {
                console.log("修改按钮点击事件：" + JSON.stringify(e))
            },
            //节点长按事件
            longPressNode(e) {
                console.log("长按事件：" + JSON.stringify(e))
            },
        }
    };
</script>

<style scoped lang="scss">
    .vrapile-content-001{
        padding: 0;
        margin: 0;
        width: 750rpx;
        height: calc(100vh - 0px);
        background-color: #fff;
        display: flex;
        flex-direction: column;
    }
    .vrapile-content-001-tree{
        padding: 0rpx 10rpx 30rpx 10rpx;
        background-color: #ffffff;
        flex: 1;
        overflow-y: auto;
    }
</style>

功能说明

• 入参 data ：非必传，树数据结构列表，默认 []

• 入参 defaultProps ：非必传，Json格式，关键字段对照，默认 { id: 'id', children: 'children', label : 'label' }

  如：部门树，主键deptId、名称deptName、子集child，则defaultProps需设为：
  
  { id: "deptId", label : "deptName", children: "child" }

• 入参 divider ：非必传，分隔线，默认 false

• 入参 unfold ：非必传，是否展开，默认 false

• 入参 edit ：非必传，是否显示按钮，默认 false

• 函数 node-click ：单击，内容是Json数据体

• 函数 add-item ：添加按钮，内容是Json数据体

• 函数 edit-item ：编辑按钮，内容是Json数据体

• 函数 long-press ：长按，内容是Json数据体

  所有入参和函数都是非必传，用到哪个实现哪个即可

其它

演示Demo： https://www.ninecloud.top/udemo/tree/index.html

演示微信小程序：

九云题库（账号/密码：visitor/visitor）