Surface如何自定义组件

以注册一个show组件为例

1.注册自定义组件
\surface\table\Table::bind('show', app\components\Show::class);
2.Show.php 组件文件内容
<?php
namespace app\components;

class Show  extends \surface\table\TableTypeBase
{
    protected $type = 'show';

    public function init($self): void
    {
        $script = <<<SCRIPT
        TableSurface.register({
            name: 'show',
            template: `<span>show-{{value}}</span>`,
            data() {
                return {}
            },
            props: {
                column: [Object, Array],// 当前列
                value: [String, Number],// 当前值
                field: String, // 当前列字段
                pk: String,    // 当前列主键名
                pkVal: [String, Number], // 当前列主键值
            }
        })
SCRIPT;
        //注册JS代码 VUE语法 JS的代码最好放到js文件中
        $self->addScript('<script>'.$script.'</script>');
    }
}
3.组件使用
'title' => [
    'title' => '标题',
    'type' => 'show',
],
  1. 页面效果

https://s.zsw.ink/blog/20200930135206.png

TableSurface提供的方法

TableSurface.register(component, events) 组件注册 component组件 events事件注册{onRuleInit:func()}

TableSurface.render() 页面渲染