Tree

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>