tree-fransfer-vue3 是一个基于 VUE 和 element-plus 的树形穿梭框组件,使用前请确认已经引入element-plus! 此组件功能类似于element-plus的transfer组件,但是里面的数据是树形结构!
npm install tree-transfer-vue3element-plus的transfer组件,但是里面的数据是树形结构!
npm install tree-transfer-vue3 --save
`
或
`
npm i tree-transfer-vue3 -S
`
> 然后你可以像使用普通组件一样使用 tree-transfer-vue3
`vue
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"
/>
`
属性
| 属性名 | 说明 | 类型 | 默认值 |
| ----------------- | ------------------------------------------------------------------------------- | ------------------- | ---------------------- |
| language | 语言(默认中文,可选:zh-cn、en) | _String_ | zh-cn |
| titleList | 标题列表 | _Array_ | ['源列表', '目标列表'] |
| showFilter | 是否显示过滤框 | _Boolean_ | true |
| placeholder | 搜索框提示文字(注意:如果 placeholderList 里面有值,优先采用 placeholderList) | _String_ | 请输入关键字搜索 |
| placeholderList | 搜索框提示文字列表 | _Array_ | [] |
| showBtnTxt | 是否显示按钮文字 | _Boolean_ | false |
| btnTitleList | 按钮文字(在 showBtnTxt 为 true 的情况下展示) | _Array_ | ['添加', '移除'] |
| defaultProps | 树节点的属性配置 | _Object_ | 见下表 |
| rootPid | 根节点 pid,用于结束递归 | _String_/_Number_ | 0 |
| renderAfterExpand | 是否在第一次展开某个树节点后才渲染其子节点 | _Boolean_ | true |
| load | 加载子树数据的方法,仅当 lazy 属性为 true 时生效 | _Function_ | -- |
| fromRenderContent | 左侧 from 树节点的内容区的渲染函数 | _Function_ | -- |
| toRenderContent | 右侧 to 树节点的内容区的渲染 | _Function_ | -- |
| highlightCurrent | 是否高亮当前选中节点 | _Boolean_ | false |
| defaultExpandAll | 是否默认展开所有节点 | _Boolean_ | true |
| expandOnClickNode | 是否在点击节点的时候展开或者收缩节点 | _Boolean_ | false |
| checkOnClickNode | 是否在点击节点的时候选中节点 | _Boolean_ | true |
| autoExpandParent | 是否自动展开父节点 | _Boolean_ | true |
| checkStrictly | 是否严格的遵守父子节点不互相关联 | _Boolean_ | false |
| accordion | 是否每次只打开一个同级树节点 | _Boolean_ | false |
| indent | 相邻级节点的水平缩进,单位为像素 | _Number_ | 18 |
| icon | 自定义显示节点前的展开箭头 | _String_ | -- |
| lazy | 是否懒加载子节点数据 | _Boolean_ | false |
| draggable | 是否开启拖拽节点功能 | _Boolean_ | false |
| fromAllowDrag | 左侧树判断节点能否被拖拽 如果返回 false ,节点不能被拖动 | _Function_ | -- |
| toAllowDrag | 右侧树判断节点能否被拖拽 如果返回 false ,节点不能被拖动 | _Function_ | -- |
> ---
defaultProps
| defaultProps | 说明 | 类型 |
| ------------ | -------------------------------------------------------- | ----------------- |
| id | 指定节点 id 为节点对象的某个属性值 | string |
| parentId | 指定节点的父节点 id 为节点对象的某个属性值 | string |
| label | 指定节点标签为节点对象的某个属性值 | string/Function |
| children | 指定子树为节点对象的某个属性值 | string |
| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | string/Function |
| isLeaf | 指定节点是否为叶子节点,仅在指定了 lazy 属性的情况下生效 | string/Function |
| class | 自定义节点类名 | string/`Function |