4.x版本开始，表格字段的渲染做了优化，同时自定义的vue文件的入口也换了新写法，普通组件的通过this.setComponent自定义vue组件，由于表格内字段同时还会有编辑态，所以入口改到了renderDefaultSlot方法内，示例代码如下
import { SPI, ViewType, BaseFieldWidget, Widget, TableNumberWidget, ModelFieldType } 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) {
const value = this.compute(context);
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低代码应用平台体验
