主题
View 视图
使用
import { KView } from "@ksware/ksw-ux";基础用法
通过v-slot绑定dataItem中value字段可实现自定义视图渲染。
树形结构
拖拽排序
自定义节点图标
使用 icon-method 属性更灵活的自定义节点图标。该方法接受两个参数，分别是当前数据项以及当前节点，返回值可以返回一个图标名称或者图标组件，也可以返回一个对象，包含 icon 属性和 css 样式属性。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 绑定的数据 | ViewData[] | - |
| default-active | 默认激活视图项 | string | number | - |
| draggable | 是否可拖拽 | boolean | false |
| collapse | 是否折叠 | boolean | false |
| show-custom-control | 是否显示自定义控制按钮 | boolean | false |
| use-tree | 是否使用树形结构 | boolean | - |
| treeConfig | 树形结构配置 | object | - |
| showCount | 是否显示视图数据量 | boolean | true |
| props | 自定义视图项属性 | object | - |
| simple 1.1.20 | 是否使用精简模式 | boolean | false |
| height 1.1.20 | 视图高度 | string | number | - |
| v-model / modelValue 1.1.21 | 当前激活视图项 | string | number | - |
| default-width 1.2.1 | 默认宽度，单位为px | number | 250 |
| max-width 1.2.1 | 最大宽度，单位为px | number | - |
| min-width 1.2.1 | 最小宽度，单位为px | number | - |
| resize-line-style 1.2.1 | resize线条样式 | object | - |
| resize-line-class 1.2.1 | resize线条类名 | string | - |
| preview-line-style 1.2.1 | 拖拽预览线条样式 | object | - |
| preview-line-class 1.2.1 | 拖拽线条类名 | string | - |
| icon-method 1.2.1 | 自定义图标方法 | Function | - |
Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| refresh | 点击刷新按钮时触发 | Function |
| change | 视图切换时触发 | Function |
| remove | 点击删除视图按钮时触发 | Function |
| drag | 视图拖拽后触发 | Function |
| visible | 视图显示/隐藏时触发 | Function |
TreeViewConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| nodeKey | 节点唯一标识 | string | number | value |
| emptyText | 空数据时显示的文字 | string | - |
| expand-on-click-node | 是否点击节点展开, 为 false 时只有点箭头才会展开 | boolean | - |
| default-expanded-keys | 默认展开的节点 | array | - |
| showArrow | 是否显示箭头 | boolean | true |
| accordion | 是否每次只打开一个同级树节点展开 | boolean | false |
| indent | 相邻级节点间的水平缩进，单位为px | number | 18 |
| lazy | 是否懒加载子节点 | boolean | false |
| icon | 子节点图标 | string | Component | Function | - |
| expandIcon | 父节点展开图标 | string | Component | Function | - |
| collapseIcon | 父节点收起图标 | string | Component | Function | - |
| load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | Function | - |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 默认视图内容 | - |
| [active] | 自定义激活视内容， active为视图项的value | - |
| header | 自定义头部内容 | - |
| refresh | 自定义刷新按钮 | object |
| label | 自定义视图项 | - |
| custom-header | 自定义视图内容 | - |
Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| expand | 展开视图 | Function |
| collapse | 收起视图 | Function |
| toggle | 切换视图展开/收起状态 | Function |
| isExpand | 获取视图是否展开 | Function |
| isCollapse | 获取视图是否收起 | Function |