View 视图

使用

基础用法

通过v-slot绑定dataItem中value字段可实现自定义视图渲染。

树形结构

拖拽排序

API

View Props

参数名	描述	类型	默认值
data	绑定的数据	`ViewData[]`	`-`
defaultActive	默认激活视图项	`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`	`-`

View 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`	`-`

View Methods

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

View Slots

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