主题
TreeTransfer 树形穿梭框
使用
import { KTreeSelect } from "@ksware/ksw-ux";基础用法
TreeTransfer 的数据通过 data 属性传入。 数据需要是一个对象数组，每个对象有以下属性：key(默认为id) 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止被操作。
自定义Icon
TreeTransfer组件可以通过以下属性进行自定义设置：expand-icon（展开图标）、expand-icon-color（展开图标颜色）、collapse-icon（收起图标）、collapse-icon-color（收起图标颜色）和 icon（图标样式）。为了提高代码的可读性和维护性，建议将这些属性整合到一个名为 TreeTransferOptions 的对象中。在使用时，您可以根据需要设置这些属性，以实现自定义展示效果。
自定义
可以对列表标题文案、默认选中值、按钮文案等进行自定义。
可以使用 titles、default-data、rightHeader插槽、empty插槽分别对列表标题文案、默认选中值、按钮文案、空数据文案进行自定义。此外，如果希望某些数据项在初始化时就被勾选，可以使用 default-data 属性。 最后，本例还展示了 change 事件的用法。
拖拽
设置showDrag属性为true可以开启右侧列表的拖拽功能。
多搜索框
设置showSearchInput属性为true可以开启多搜索框功能, left可以指定开启左侧搜索框。 searchConfig属性可以指定左侧搜索框的配置，rightSearchConfig属性可以指定右侧搜索框的配置。
多列表格
配置columns属性可以开启多列表格功能, 使用rowKey属性可以指定数据的唯一标识。
指定高度
设置tableHeight属性可以指定内容区的高度。
自适应高度
设置adaptive属性令指定内容区高度自适应。
分页模式
设置showPage为true可以开启分页模式, 并且还可以设置成left或right指定分页单独显示在左侧或右侧。 leftPaginationConfig属性可以指定左侧分页的配置，rightPaginationConfig属性可以指定右侧分页的配置(不存在时与左侧配置相同)。
动态数据
v-model可以绑定数据，可以实现动态数据加载。
提示
使用v-model后,default-data属性将失效。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model / modelValue | 选中数据 | TreeTransferData[] | - |
| row-key | 指定用来作为唯一标识的键名 | string | id |
| data | 绑定的数据 | TreeTransferData[] | - |
| default-data | 默认选中数据 | string[] | - |
| titles | 视图标题 | array | - |
| use-tree | 是否使用树形结构 | boolean | false |
| expand-icon | 展开图标 | string | Component | - |
| expand-icon-color | 展开icon颜色 | string | - |
| collapse-icon | 收起图标 | string | Component | - |
| collapse-icon-color | 收起icon颜色 | string | Component | - |
| icon | 叶子节点图标 | string | component | false |
| icon-color | 叶子节点icon颜色 | string | - |
| tree-config | 树形结构配置 | object | - |
| label | 显示字段 | string | - |
| scroll-y | 滚动条配置 | object | - |
| show-drag | 是否启用拖拽排序 | boolean | false |
| show-search-input | 显示对应位置搜索框(true时左右都显示) | boolean | 'left' | left |
| search-config | 左侧搜索框配置 | object | - |
| right-search-config | 右侧搜索配置 | object | - |
| show-page | 是否显示分页 | enum | false |
| left-pagination-config | 左侧分页配置 | object | - |
| right-pagination-config | 右侧分页配置，不存在时默认使用左侧分页配置 | object | - |
| columns | 进行表格列配置 | Column[] | - |
| table-height | 表格内容高度 | number | - |
| check-method | 自定义选中方法 | Function | - |
| checkbox-all | 是否全部选中 | boolean | - |
Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| change | 选中数据变化时触发 | Function |
| drag | 拖拽排序时触发 | Function |
| remote-query | 远程搜索时触发 | Function |
| server-paging | 服务端分页时触发 | Function |
| page-current-change | 分页当前页变化时触发 | Function |
| page-size-change | 分页每页条数变化时触发 | Function |
| page-change | 分页每页条数变化时触发 | Function |
| page-prev-click | 分页每页条数变化时触发 | Function |
| page-next-click | 分页每页条数变化时触发 | Function |
Column
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 列头显示文字 | string | - |
| field | 列字段名 | string | - |
| width | 列宽度 | number | string | - |
| minWidth | 最小列宽度 | number | string | - |
| treeNode | useTree=true时有效，指定树节点列 | boolean | - |
| sortable | 是否可排序 | boolean | false |
| showIcon | 是否显示图标 | boolean | false |
| visible | 是否显示该列 | boolean | true |
| showColumnMenu | 是否显示列头菜单 | boolean | false |
| group | 用于多级表头分组，参数配置与列配置一致 | Column[] | - |
| render | 自定义渲染函数 | Function | - |
| renderEdit | 自定义渲染编辑单元格函数 | Function | - |
| dataType | 数据类型 | enum | - |
SearchConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| strict | 是否精确搜索 | boolean | false |
| searchMethod | 自定义搜索方法 | Function | - |
| isRemoteQuery | 是否远程搜索 | boolean | false |
| ignoreCase | 是否忽略大小写 | boolean | false |
| searchColumns | 允许指定搜索列,输入值为表格列配置的field,只有指定列才会进行搜索 | string[] | - |
| supportPinYin | 允许指定拼音搜索列,输入值为表格列配置的field,只有指定列才会进行搜索，为true时，会搜索所有数据 | boolean | string[] | false |
TablePaginationConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| total | 总条数 | number | - |
| pageSize | 每页条数 | number | - |
| pageSizes | 每页条数选项 | number[] | - |
| currentPage | 当前页数 | number | - |
| pageCount | 总页数 | number | - |
| layout | 分页布局 | enum | - |
| isRemotePaging | 是否服务端分页 | boolean | false |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| left-cell | 自定义左侧单元格内容 | - |
| right-cell | 自定义右侧单元格内容 | - |
| right-header | 自定义右侧头部内容 | - |
| right-label | 自定义右侧文本内容 | - |
| empty | 自定义空数据内容 | object |
Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| clearData | 清空选择的数据 | Function |
| setCheckboxRow | 设置某一行的选中状态 | Function |
| isCheckedRow | 获取某一行的选中状态 | Function |
| clearQuery | 清空搜索框内容 | Function |
| getQuery | 获取搜索框内容 | Function |
| setAllCheckboxRow | 设置所有行的选中状态 | Function |
| clearCheckboxRow | 设置所有行的清除复选框选中行选中状态 | Function |
| clearCheckboxReserve | 清除复选框缓存状态 | Function |
| getCheckboxRecords | 获取选中的数据 | Function |