织信低代码平台开发文档

Appearance

自定义组件字段 ​

使用网站模块页面自定义显示控件

说明 ​

说明项内容
分类控件类
是否可排序否
是否支持过滤否
支持过滤器类型无
排序方式无

在数据库中的存储格式 ​

不存储数据库

使用场景 ​

  • 个性化的展示方式。如字段中展示环形进度条、穿梭框、图表、视频播放,地图等。
  • 具有特殊交互逻辑的字段。如图片素材库，数据公式等。

渲染方式

该字段主要有使用网站模块的页面渲染、使用组件渲染两种方式。 使用网站模块的页面渲染是基于iframe进行渲染，需要设置组件的高度，在内容高度不固定的情况下，可能与其他空间的操作会有割裂感，由于iframe内部的元素无法显示到父窗口中，不建议内部有提示框或者下拉列表的情况使用。

使用组件渲染是基于shadowDOM渲染，并直接注入到表单上下文中的，交互方式上更友好，更推荐这种方式进行渲染。

使用组件渲染 ​

在实际的项目开发过程中，我们发现有一些场景，使用系统提供的表单字段类型没法覆盖完整的应用场景。这时候，我们可以通过组件编辑器去开发组件，并使用自定义组件字段进行渲染。

效果图 ​

效果图

穿梭框组件定义 ​

组件设计器中创建组件，并将下方的定义粘贴到对应的版块，完成组件定义

组件库依赖

该组件需要依赖ElementUI组件库

html
<div style="width:100%;height:100%;position:relative">
    <el-transfer :data="data" :value="value" v-on:change="change"></el-transfer>
    <div style="margin-top:20px">
        <el-button v-on:click="showLoading">
        设置表单loading
        </el-button>
    </div>
</div>
javascript
export default{
    // 组件参数定义
    props: {
        data: {
            type: Array,
            default:() => []
        },
        value: {
            type: Array,
            default:() => []
        }
    },
    methods:{
        showLoading() {
            // 表单显示loading
            this.$emit('show-loading');  
            setTimeout(() => {
                // 表单隐藏loading
                this.$emit('hide-loading')  
            }, 3000);
        },
        change(val) {
            // 设置表单字段的值
            this.$emit('set-field-value', { field: 'transferValue', value: JSON.stringify(val) }) 
        }
    }
}

表单配置步骤 ​

组件完成定义后，配置一个数据表包含以下字段：

标识符名称类型描述
transfer自定义组件穿梭框自定义组件
transferValue穿梭框数据富文本用于存储自定义组件的数据，编辑器类型为文本编辑器

自定义组件配置： 自定义组件配置

通过创建或者编辑页面打开表单页面进行体验即可

使用网站模块的页面渲染 ​

关于页面数据交互，可参考网站服务