4.x版本开始,表格字段的渲染做了优化,同时自定义的vue文件的入口也换了新写法,普通组件的通过this.setComponent
自定义vue组件,由于表格内字段同时还会有编辑态,所以入口改到了renderDefaultSlot
方法内,示例代码如下
import { SPI, ViewType, BaseFieldWidget, Widget, TableNumberWidget, ModelFieldType } from '@kunlun/dependencies';
import DetailStringUpperCaseField from './CustomTableNumber.vue';
import { createVNode } from 'vue';
@SPI.ClassFactory(
BaseFieldWidget.Token({
ttype: [ModelFieldType.Integer, ModelFieldType.Float],
viewType: [ViewType.Table],
// widget: 'CustomTableNumberWidget'
})
)
export class CustomTableNumberWidget extends TableNumberWidget {
// 表格详情模式渲染入口
@Widget.Method()
public renderDefaultSlot(context) {
const value = this.compute(context);
if (value) {
// 自定义组件入口在此处
return [createVNode(DetailStringUpperCaseField, { value })];
}
return [];
}
}
Oinone社区 作者:汤乾华原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/4246.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验