目录
表单字段注册vue组件实现机制
核心代码
public initialize(props) {
super.initialize(props);
this.setComponent(VueComponent);
return this;
}
表格字段注册vue组件实现机制
核心代码
@Widget.Method()
public renderDefaultSlot(context: RowContext) {
const value = this.compute(context);
return [createVNode(CustomTableString, { value })];
}
因为表格有行跟列,每一列都是一个单独的字段(对应的是TS文件),但是每列里面的单元格承载的是Vue组件,所以通过这种方式可以实现表格每个字段对应的TS文件是同一份,而单元格的组件入口是通过renderDefaultSlot
函数动态渲染的vue组件,只需要通过createVNode
创建对应的vue组件,然后将props传递进去就行
上下文接口
interface RowContext<T = unknown> {
/**
* 当前唯一键, 默认使用__draftId, 若不存在时,使用第三方组件内置唯一键(如VxeTable使用{@link VXE_TABLE_X_ID})
*/
key: string;
/**
* 当前行数据
*/
data: Record<string, unknown>;
/**
* 当前行索引
*/
index: number;
/**
* 第三方组件原始上下文
*/
origin: T;
}
机制对比分析
表单字段 vs 表格字段渲染机制对比表
对比维度 | 表单字段实现方案 | 表格字段实现方案 |
---|---|---|
绑定时机 | initialize 阶段静态绑定 |
renderDefaultSlot 阶段动态创建 |
组件声明方式 | this.setComponent(Component) |
createVNode(Component, props) |
上下文传递 | 通过类成员变量访问 | 显式接收 RowContext 参数 |
渲染控制粒度 | 字段级(表单控件) | 单元格级 |
表格字段完整案例
import { SPI, ViewType, BaseFieldWidget, Widget, TableNumberWidget, ModelFieldType, RowContext } from '@kunlun/dependencies';
import CustomTableString from './CustomTableString.vue';
import { createVNode } from 'vue';
@SPI.ClassFactory(
BaseFieldWidget.Token({
ttype: ModelFieldType.String,
viewType: [ViewType.Table],
widget: 'CustomTableStringWidget'
})
)
export class CustomTableStringWidget extends BaseTableFieldWidget {
@Widget.Method()
public renderDefaultSlot(context:RowContext) {
const value = this.compute(context); // 当前字段的值
const rowData = context.data // 当前行的数据
const dataSource = this.dataSource // 表格数据
if (value) {
// 自定义组件入口在此处
return [createVNode(CustomTableString, { value })];
}
return [];
}
}
<template>
<div>当前值: {{value}}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
props: ['value']
})
</script>
Oinone社区 作者:汤乾华原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/4246.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验