目录
表单字段注册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低代码应用平台体验
