更新记录

1.0.5（2023-11-30）

小程序不支持插槽，如需修改，请更改组件注释处

1.0.4（2023-11-30）

优化小程序端插槽问题

1.0.3（2023-11-15）

优化

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

树形结构，支持多选，默认都收起，为保证数据量大的时候页面卡顿问题，采用 v-if 渲染子数据，如果数据巨大，又默认全展开，可能页面会有性能问题，建议默认关闭或展开少数层级。

props

prop 类型 默认 说明
v-model Array [] 默认值
treeData Array [] 树结构1.0.2
text string text 展示标题字段
nodeKey string value 目标字段，即多选后返回的数组值对应的键
children string childrens 子集列表键
multiple Boolean false 是否开启多选1.0.2
textClickToggle Boolean false 标题点击触发子集列表显隐
defaultShowChildren Boolean/Number false 默认展开所有，或展开 Number 级
accordion Boolean false 手风琴模式，每次只展开一项

emits

emit 说明
nodeClick 点击标题时触发事件，回调参数为当前项数据

slot

slot 说明
default 节点文案区插槽，不包含左侧图标和多选框，作用域参数为：{ node }

示例

<template>
  <view class="">
    <mosowe-tree-list
      v-model="data"
      :treeData="treeList"
      text="name"
      nodeKey="permission"
      defaultShowChildren
      accordion
      multiple>
      <template #default="{ node }">
        <view class="test">{{ node.name }}</view>
      </template>
    </mosowe-tree-list>
  </view>
</template>

<script
  setup
  lang="ts">
  import { ref, watch } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  const data = ref([]);
  watch(
    () => data.value,
    () => {
      console.log(data.value);
    }
  );
  const treeList = [
    {
      _id: '64589cd409e29891989bc315',
      comment: '系统管理-目录',
      create_date: 0,
      enable: true,
      icon: 'uni-icons-list',
      menu_id: 'system',
      name: '系统管理',
      parent_id: '',
      permission: 'system',
      sort: 99,
      type: 0,
      url: '',
      childrens: [
        {
          _id: '64589cd409e29891989bc316',
          comment: '用户管理',
          create_date: 0,
          enable: true,
          icon: 'uni-icons-person-filled',
          menu_id: 'system-user',
          name: '用户管理',
          parent_id: 'system',
          permission: 'system-user',
          sort: 99,
          type: 1,
          url: '/pages/system/users/users',
          childrens: [
            {
              _id: '64589cd409e29891989bc317',
              comment: '用户管理-查看',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-user-see',
              name: '查看',
              parent_id: 'system-user',
              permission: 'system-user-see',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '查看',
              value: 'system-user-see'
            },
            {
              _id: '64589cd409e29891989bc318',
              comment: '用户管理-新增',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-user-add',
              name: '新增',
              parent_id: 'system-user',
              permission: 'system-user-add',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '新增',
              value: 'system-user-add'
            },
            {
              _id: '64589cd409e29891989bc319',
              comment: '用户管理-编辑',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-user-edit',
              name: '编辑',
              parent_id: 'system-user',
              permission: 'system-user-edit',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '编辑',
              value: 'system-user-edit'
            },
            {
              _id: '64589cd409e29891989bc31a',
              comment: '用户管理-删除',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-user-delete',
              name: '删除',
              parent_id: 'system-user',
              permission: 'system-user-delete',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '删除',
              value: 'system-user-delete'
            },
            {
              _id: '64589cd409e29891989bc31b',
              comment: '用户管理-重置密码',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-user-password',
              name: '重置密码',
              parent_id: 'system-user',
              permission: 'system-user-password',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '重置密码',
              value: 'system-user-password'
            },
            {
              _id: '64589cd409e29891989bc31c',
              comment: '用户管理-用户状态设置，启用禁用',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-user-status',
              name: '用户状态设置',
              parent_id: 'system-user',
              permission: 'system-user-status',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '用户状态设置',
              value: 'system-user-status'
            }
          ],
          text: '用户管理',
          value: '/pages/system/users/users'
        },
        {
          _id: '64589cd409e29891989bc31d',
          comment: '菜单管理',
          create_date: 0,
          enable: true,
          icon: 'uni-icons-list',
          menu_id: 'system-menu',
          name: '菜单管理',
          parent_id: 'system',
          permission: 'system-menu',
          sort: 99,
          type: 1,
          url: '/pages/system/menus/menus',
          childrens: [
            {
              _id: '64589cd409e29891989bc31e',
              comment: '菜单管理-查看',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-menu-see',
              name: '查看',
              parent_id: 'system-menu',
              permission: 'system-menu-see',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '查看',
              value: 'system-menu-see'
            },
            {
              _id: '64589cd409e29891989bc31f',
              comment: '菜单管理-新增',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-menu-add',
              name: '新增',
              parent_id: 'system-menu',
              permission: 'system-menu-add',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '新增',
              value: 'system-menu-add'
            },
            {
              _id: '64589cd409e29891989bc320',
              comment: '菜单管理-编辑',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-menu-edit',
              name: '编辑',
              parent_id: 'system-menu',
              permission: 'system-menu-edit',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '编辑',
              value: 'system-menu-edit'
            },
            {
              _id: '64589cd409e29891989bc321',
              comment: '菜单管理-删除',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-menu-delete',
              name: '删除',
              parent_id: 'system-menu',
              permission: 'system-menu-delete',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '删除',
              value: 'system-menu-delete'
            }
          ],
          text: '菜单管理',
          value: '/pages/system/menus/menus'
        },
        {
          _id: '64589cd409e29891989bc322',
          comment: '角色管理',
          create_date: 0,
          enable: true,
          icon: '',
          menu_id: 'system-roles',
          name: '角色管理',
          parent_id: 'system',
          permission: 'system-roles',
          sort: 99,
          type: 1,
          url: '/pages/system/roles/roles',
          childrens: [
            {
              _id: '64589cd409e29891989bc323',
              comment: '角色管理-查看',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-roles-see',
              name: '查看',
              parent_id: 'system-roles',
              permission: 'system-roles-see',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '查看',
              value: 'system-roles-see'
            },
            {
              _id: '64589cd409e29891989bc324',
              comment: '角色管理-新增',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-roles-add',
              name: '新增',
              parent_id: 'system-roles',
              permission: 'system-roles-add',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '新增',
              value: 'system-roles-add'
            },
            {
              _id: '64589cd409e29891989bc325',
              comment: '角色管理-编辑',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-roles-edit',
              name: '编辑',
              parent_id: 'system-roles',
              permission: 'system-roles-edit',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '编辑',
              value: 'system-roles-edit'
            },
            {
              _id: '64589cd409e29891989bc326',
              comment: '角色管理-删除',
              create_date: 0,
              enable: true,
              icon: '',
              menu_id: 'system-roles-delete',
              name: '删除',
              parent_id: 'system-roles',
              permission: 'system-roles-delete',
              sort: 99,
              type: 2,
              url: '',
              childrens: [],
              text: '删除',
              value: 'system-roles-delete'
            }
          ],
          text: '角色管理',
          value: '/pages/system/roles/roles'
        }
      ],
      text: '系统管理',
      value: 'system'
    }
  ];
</script>

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...