默认为HTML渲染

  1. <span v-if="componentName == 'default'" v-html="selfValue"></span>

自定义数据

可以在后端自定义当前列的值

  • $row当前数据行的所有值
  • $value当前列的值

默认


$grid->column('name')->customValue(function ($row, $value) {
    return "<div>".$value."</div>";
});

一对一

$grid->column('user.name')->customValue(function ($row, $value) {
    //此时的value是name的值
    return $value;
});

一对多


$grid->column('roles.name')->customValue(function ($row, $value) {
    //此时的value是 roles.name的值的数组
    //$value= ["name-1","name-2"];
    return $value;
});

前缀/后缀

会在值的前后以字符串形式拼接

$grid->column('name')->itemSuffix("后面");
$grid->column('name')->itemPrefix("前面");

组件渲染

列的显示模式，默认显示纯文本形式

$grid->column('id', 'ID')->component(Tag::make()->size("mini")->type("info"));

标签

Tag::make();

类型

Tag::make()->type();
//指定类型
Tag::make()->type('info');
//随机类型
Tag::make()->type(['info','danger']);
//值对应类型
Tag::make()->type(['yes'=>'info','on'=>'danger',1=>'success',0=>'warning']);

是否可关闭

Tag::make()->closable();

是否禁用渐变动画

Tag::make()->disableTransitions();

是否有边框描边

Tag::make()->hit();

尺寸

medium small mini

Tag::make()->size('mini');

主题

dark light plain

Tag::make()->effect('dark');

文字链接

将字段值以链接形式渲染

Link::make();

type设置
默认，会从 primary success warning danger info 随机显示一个

Tag::make()->type();
//指定值
Tag::make()->type('info');
//指定随机组
Tag::make()->type(['info','danger']);
//指定值对应
Tag::make()->type(['yes'=>'info','on'=>'danger',1=>'success',0=>'warning']);

是否下划线

Tag::make()->underline();

是否禁用状态

Tag::make()->disabled();

原生 href 属性

Tag::make()->href("http://www.baidu.com");

图标类名

可直接使用内置 Icon 图标，或使用自定义图标

详细属性请查看element-ui文档

Tag::make()->icon('el-icon-platform-eleme');
//OR
Tag::make()->icon('iconfont my-icon-name');

头像

属性与 Element Avatar相同

Avatar::make();

设置头像的大小
number large medium small

Avatar::make()->size('small');

设置头像的形状
circle square

Avatar::make()->shape('square');

图片

可显示单张或多张图片，支持大图预览，详细属性请查看element-ui文档

Image::make();

图标

详细属性请查看element-ui文档

Icon::make()

状态

Boole::make()

评分

详细属性请查看element-ui文档

Rate::make()