cy-tree-transfer-vue3 v1.2.3

tree-transfer-vue3

效果图

简介

tree-transfer-vue3 是一个基于 VUE 和 element-plus 的树形穿梭框组件，使用前请确认已经引入element-plus！ 此组件功能类似于element-plus的transfer组件，但是里面的数据是树形结构！ 实际上，tree-transfer-vue3 依赖的 element-plus 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-plus 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。

我命油我不油天，仿写一个 vue3 版本的树形穿梭框组件玩玩；参考el-tree-transfer

重要更新（请使用最新版本）

1.2.1 处理 defaultProps 改变（非默认值），数据不显示的问题

NPM - GitHub - CSDN

快速上手

npm 下载插件

npm install cy-tree-transfer-vue3 --save

或

npm i cy-tree-transfer-vue3 -S

然后你可以像使用普通组件一样使用 tree-transfer-vue3

<template>
  <tree-transfer
    ref="transferRef"
    v-model:fromData="fromData"
    v-model:toData="toData"
    :defaultProps="{
      id: 'id', // 节点id
      parentId: 'parentId', // 父节点id
      label: 'label',
      children: 'children',
      disabled: 'disabled',
    }"
    rootPid="0"
    @add="handleAdd"
    @remove="handleremove"
  />
</template>

<script setup>
import { ref } from 'vue';
import TreeTransfer from 'tree-transfer-vue3'; // 引入

const transferRef = ref(null); // 穿梭框Ref
const fromData = ref([
  {
    id: '1',
    parentId: 0,
    label: '一级 1',
    children: [
      {
        id: '1-1',
        parentId: '1',
        label: '二级 1-1',
        children: [],
      },
      {
        id: '1-2',
        parentId: '1',
        label: '二级 1-2',
        children: [
          {
            id: '1-2-1',
            parentId: '1-2',
            disabled: true,
            children: [],
            label: '二级 1-2-1',
          },
          {
            id: '1-2-2',
            parentId: '1-2',
            children: [],
            label: '二级 1-2-2',
          },
          {
            id: '1-2-3',
            parentId: '1-2',
            children: [],
            label: '二级 1-2-3',
          },
        ],
      },
    ],
  },
  {
    id: '2',
    parentId: 0,
    label: '一级 2',
    children: [
      {
        id: '2-1',
        parentId: '2',
        label: '二级 2-1',
      },
      {
        id: '2-2',
        parentId: '2',
        label: '二级 2-2',
      },
    ],
  },
  {
    id: '4',
    parentId: 0,
    label: '一级 4',
    children: [
      {
        id: '4-1',
        parentId: '4',
        label: '二级 4-1',
      },
      {
        id: '4-2',
        parentId: '4',
        label: '二级 4-2',
      },
    ],
  },
]);
const toData = ref([]);

const handleAdd = (_fromData, _toData, { checkedKeys, checkedNodes, harfKeys, harfNodes }) => {
  console.log('handleAdd', checkedKeys, checkedNodes, harfKeys, harfNodes);
};
const handleremove = (_fromData, _toData, { checkedKeys, checkedNodes, harfKeys, harfNodes }) => {
  console.log('handleremove', checkedKeys, checkedNodes, harfKeys, harfNodes);
};
</script>

属性

defaultProps

事件

方法

插槽

版本说明

1.1.0 添加说明文档，更新事件、方法、插槽

1.2.0 导出方式修改，页面样式修改，请使用最新版本

1.2.1 处理 defaultProps 改变（非默认值），数据不显示的问题

1.2.2 语言功能

GitHub demo 代码地址 欢迎 star 谢谢

有 BUG 请随时联系我，可以在我的博客下面留言！