Tree
树形选择。
说明
组件API详细内容请参考:https://www.antdv.com/components/tree-cn
使用方法
- 事件脚本示例:
// 在script标签中按需引入 import { Tree } from '@jecloud/ui'; export default { components: { Tree}, setup() { const treeData =[ { title: 'parent 1', key: '0-0', children: [ { title: 'parent 1-0', key: '0-0-0', disabled: true, children: [ { title: 'leaf', key: '0-0-0-0', disableCheckbox: true, }, { title: 'leaf', key: '0-0-0-1', }, ], }, { title: 'parent 1-1', key: '0-0-1', children: [ { key: '0-0-1-0', title: 'sss', }, ], }, ], }, ]; }, }; return { treeData } // 在vue的template标签中 <div class="draggable-list" ref="listRef"> <div v-for="(item, index) in listData" :key="index" class="is--draggable draggable-list-item" > {{ item.text }} </div> <div v-if="!listData.length">请将右侧数据拖入</div> </div> <Tree height="600" :search="{ subLabelField: 'code' }" :size="size" :loading="loading" :data="treeData" multiple :draggable="{ group: { name: 'group', put: false, pull: 'clone' }, sort: false, }" @drop="drop" @beforeDrop="beforedrop" @checkbox-change="handlerSelect" :tree-config="{ rowField: 'id', parentField: 'parentId', }" > <template #nodeIcon="{ rowIndex }"> <i class="fal fa-home" title="自定义图标" v-if="rowIndex > 1"></i> </template> <template #action="options"> <Menu :selectable="false" @click=" (args) => { menuClick(args, options); } " > <MenuItem v-for="key in [1, 2, 3]" :key="key" icon="fal fa-alarm-clock"> 菜单{{ `(${options.row.text})${key}` }} </MenuItem> </Menu> </template> </Tree>
最后编辑: 秦永莲 文档更新时间: 2024-07-26 14:15 作者:秦永莲