IBPS v3.3.4 +版本支持该功能

概述

可以在设计器左侧配置自己的组件进行操作。

自定义组件是自己写页面和数据逻辑
自定义控件是字段控件绑定的是字段属性

需要先了解vue组件的基础
https://cn.vuejs.org/v2/guide/components.html

组件是必须在views下的组件

自定义组件

具体看多级子表解决方案的例子

自定义控件

<template>
  <div class="custom-control">
    <span>
      宽:<el-input v-model="dataModel.width" style="width: 200px;" />
    </span>
    <span>
      高:<el-input v-model="dataModel.height" style="width: 200px;" />
    </span>
  </div>
</template>

<script>
export default {
  name: 'custom-width-height',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataModel: {
        width: '',
        height: ''
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        if (this.$utils.isEmpty(val)) {
          this.dataModel = {
            width: '',
            height: ''
          }
        } else {
          this.dataModel = JSON.parse(val)
        }
      },
      immediate: true
    },
    dataModel: {
      handler(val) {
        this.$emit('input', JSON.stringify(val))
      },
      deep: true
    }
  }
}
</script>

<style lang="scss">
.custom-control{
  background: #eee;
  padding: 10px;

  span{
    +span{
      margin-left: 10px;
    }
  }
}
</style>

需要注意,自定义组件必须能够使用 v-model 进行双向绑定,如果还不知道如何创建,可以自行先阅读 Vue.js 文档

FAQ

1)如何传递数据

需要先了解vue组件的基础
https://cn.vuejs.org/v2/guide/components.html
通过 Prop 向子组件传递数据,组件固有的几个属性

属性 描述 备注
value 字段数据 通过v-model传递
field 字段属性
formData 表单数据
readonly 是否只读
readonly-style 只读样式
code 表单字段Code
row 子表的所在行
params 扩展属性

2) 组件事件

需要先了解vue组件的基础
https://cn.vuejs.org/v2/guide/components.html
监听子组件所有事件
①、改变值

②、改变表单其他字段值
如果需要修改表单其他字段数据,需要用change-data事件(参数:字段名,值)
③、自定义事件
自定义的事件则需要表单脚本进行数据处理
https://cn.vuejs.org/v2/guide/components-custom-events.html

3)自定义组件如何双向绑定数据或初始化数据

自定义组件必须能够使用 v-model 进行双向绑定,如果还不知道如何创建,可以自行先阅读 Vue.js 文档

文档更新时间: 2020-12-07 14:37   作者:hugh