阅读之前
你应该：
- 了解DSL相关内容。母版-布局-DSL 渲染基础（v4）
- 了解SPI机制相关内容。组件SPI机制（v4）
什么是视图组件
我们将一个视图中提供数据源的组件称为视图组件。
下面，我们将根据提供的示例布局进行进一步介绍。
示例布局（默认表格视图布局）
<view type="TABLE">
<pack widget="group">
<view type="SEARCH">
<element widget="search" slot="search" />
</view>
</pack>
<pack widget="group" slot="tableGroup">
<element widget="actionBar" slot="actionBar">
<xslot name="actions" />
</element>
<element widget="table" slot="table">
<element widget="expandColumn" slot="expandRow" />
<xslot name="fields" />
<element widget="rowActions" slot="rowActions" />
</element>
</pack>
</view>- view: 视图标签；一个视图中的所有组件将共享数据源，视图的数据源通过视图组件进行提供。（在这个示例中，该视图的数据源通过
widget="table"（TableWidget）提供） - pack: 容器组件标签；
- element: 通用元素组件标签；
- xslot：dsl插槽；
根据标签性质，我们可以将这个示例布局进一步简化，只留下我们目前要关注的主要内容。
<view type="TABLE">
<element widget="table" slot="table">
<xslot name="fields" />
</element>
</view>在以上示例布局中，有且仅有一个组件会向视图提供数据源，那就是widget="table"（TableWidget）这个组件。
我们接下来将对这个组件进行自定义，以实现业务中所需的列表(List)数据源展示方式。
1 平台组件简介
平台提供的基础组件有如下几种：
| 组件名称 | 描述 |
|---|---|
| BaseElement | element标签通用组件 |
| BaseElementViewWidget | 通用视图组件 |
| BaseElementObjectViewWidget | 对象（Object）数据源通用视图组件 |
| BaseElementListViewWidget | 列表（List）数据源通用组件 |
平台提供的内置组件有如下几种：（均使用element标签）
| 组件名称 | 标签 | 视图类型 | 描述 |
|---|---|---|---|
| TableWidget | widget="table" | TABLE | 内置表格组件 |
| FormWidget | widget="form" | FORM | 内置表单组件 |
| DetailWidget | widget="detail" | DETAIL | 内置详情组件 |
| GallertWidget | widget="gallery" | GALLERY | 内置画廊组件 |
| TreeWidget/CardCascaderWidget | widget="tree/cardCascader" | TREE | 内置树/卡片级联组件 |
我们可以根据业务场景，继承不同的组件，来实现自己的业务场景。
在自定义过程中，我们建议尽可能的将逻辑控制在组件内部。如果场景是唯一且确定的，也可以进行一些特殊逻辑处理。
2 场景：实现一个虚拟滚动表格（不使用分页器）
2.1 确定组件名称 widget="VirtualTable"
通过布局设置自定义组件名称
我们将原表格布局中的widget="table"改为我们所需要的自定义组件名称即可。
多个视图可以绑定同一个布局，所以这种修改方式更适用于大范围使用相同布局的情况。
<view type="TABLE">
<pack widget="group">
<view type="SEARCH">
<element widget="search" slot="search />
</view>
</pack>
<pack widget="group" slot="tableGroup">
<element widget="actionBar" slot="actionBar>
<xslot name="actions" />
</element>
<element widget="VirtualTable" slot="table">
<element widget="expandColumn" slot="expandRow" />
<xslot name="fields" />
<element widget="rowActions" slot="rowActions" />
</element>
</pack>
</view>通过DSL设置自定义组件名称
我们使用了slot="table"这个插槽，通过属性合并覆盖的方式，在DSL上直接指定我们所需要的自定义组件名称即可。
这种修改方式更适用于个别几个视图需要使用该组件的情况。
<view type="TABLE">
<template slot="table" widget="VirtualTable">
......
</template>
</view>2.2 简单实现一个基础功能的虚拟滚动表格
定义一个VirtualTable.vue文件，使用平台提供的oio-table组件。目前内部采用vxe-table封装，相关api文档 点击查看
props定义：
- showDataSource: 当前展示数据；通过平台内置
BaseElementListViewWidget组件提供。
<template>
<oio-table ref="table" border show-overflow height="400" :row-config="{ isHover: true }" :data="showDataSource">
<slot />
</oio-table>
</template>
<script lang="ts">
import { ActiveRecord, OioTable } from '@kunlun/dependencies';
import { defineComponent, PropType } from 'vue';
export default defineComponent({
name: 'VirtualTable',
components: {
OioTable
},
props: {
showDataSource: {
type: Array as PropType<ActiveRecord[]>
}
}
});
</script>定义一个VirtualTableWidget.ts文件，继承BaseElementListViewWidget组件，可快速实现根据元数据查询列表数据等相关功能。
通过重写showPagination属性，强制关闭分页器。
import { BaseElementListViewWidget, BaseElementWidget, SPI, ViewType, Widget } from '@kunlun/dependencies';
import VirtualTable from './VirtualTable.vue';
@SPI.ClassFactory(
BaseElementWidget.Token({
viewType: ViewType.Table,
widget: 'VirtualTable'
})
)
export class VirtualTableWidget extends BaseElementListViewWidget {
public initialize(props) {
super.initialize(props);
this.setComponent(VirtualTable);
return this;
}
@Widget.Reactive()
protected get showPagination(): boolean | undefined {
return false;
}
}
2.3 工程结构如下图所示
将VirtualTableWidget.ts文件在main.ts(入口文件)导入即可。
Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/22.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
