View 视图

使用

基础用法

通过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	是否使用精简模式	`boolean`	`false`
height	视图高度	`string \| number`	`-`
v-model / modelValue	当前激活视图项	`string \| number`	`-`
default-width	默认宽度，单位为px	`number`	`250`
max-width	最大宽度，单位为px	`number`	`-`
min-width	最小宽度，单位为px	`number`	`-`
resize-line-style	resize线条样式	`object`	`-`
resize-line-class	resize线条类名	`string`	`-`
preview-line-style	拖拽预览线条样式	`object`	`-`
preview-line-class	拖拽线条类名	`string`	`-`
icon-method	自定义图标方法	`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`	`-`

Methods

方法名	描述	类型
expand	展开视图	`Function`
collapse	收起视图	`Function`
toggle	切换视图展开/收起状态	`Function`
isExpand	获取视图是否展开	`Function`
isCollapse	获取视图是否收起	`Function`

Slots

插槽名	描述	参数
default	默认视图内容	`-`
[active]	自定义激活视内容， active为视图项的value	`-`
header	自定义头部内容	`-`
refresh	自定义刷新按钮	`object`
label	自定义视图项	`-`
custom-header	自定义视图内容	`-`