Element Plus Plugin

快速开始

（插件的使用帮助说明在第二部分，请下拉查看）

编译

• 依赖 typescript 4.4.4, 请确保电脑安装有 4x版本以上的SDK。
• 插件会在 设计器的默认安装路径下 获取引用,如果你的设计器是自定义的安装路径，需要更新引用的路径，具体可阅读 活字格-插件开发-插件开发流程。

分支管理

• master 是发布的最新版本,和插件商城 最新版本对应。
• dev 开发人员会在该分支上开发，你可以在此分支获取最新的代码，仅限学习和测试，请勿在生产环境中使用。

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

目录

• 说明

• Element UI 单元格类型

  • • EL-日历

    • EL-头像

    • EL-面包屑

    • EL-级联选择器

    • EL-日期选择器

    • EL-输入框

    • EL-计数器

    • EL-导航菜单

    • EL-分页

    • EL-进度条

    • EL-评分

    • EL-选择器

    • EL-滑块

    • EL-步骤条

    • EL-标签页头

    • EL-标签

    • EL-时间线

    • EL-时间选择器

    • EL-穿梭框

    • EL-文件上传

    • EL-表格

• Element UI 命令

  • • EL-通知

    • EL-消息

    • EL-弹框

• Element UI自定义

  • • 自定义EL-回到顶部

    • 自定义EL-日历

    • 自定义EL-级联选择器

    • 自定义EL-日期选择器

    • 自定义EL-导航菜单

    • 自定义EL-选择器

    • 自定义EL-表格

Element UI插件说明

说明

Element UI是一个基于vue的一个ui框架,该框架基于vue提供了很多美观易用的组件供我们开发页面使用。

Element UI 单元格类型

EL-日历

使用场景

• 可以直接创建一个日历

使用方式

设计时

运行时

单元格设置

备注

当空间不足时，日程会展示为一个灰点

EL-头像

使用场景

• 可以替代使用图片单元格格式作为头像

• 优势在于：支持使用系统用户、支持找不到头像时显示用户名、支持角标

• 劣势在于：不支持将单元格类型添加到列表视图、不支持样式模板

使用方式

设计时

运行时

单元格设置

不勾选

EL-面包屑

使用场景

• 显示当前页面的位置，便于浏览返回

使用方式

• 初始化面包屑单元格值的三种方法

1. 使用静态值

   a.将面包屑单元格放置到每个页面，在设计时设置默认值

2. 使用数据库配置

   a.将面包屑单元格放入母版页

   b.创建一个表作为“站点”地图，如下:

   页面名称	页面路径
   用户	主页/用户管理/用户
   角色	主页/用户管理/角色
   组织	主页/用户管理/组织
   导入	主页/数据/导入
   ...

   c.在页面加载命令中，通过设置变量命令查询当前页面的名称，进一步查询页面路径，然后通过设置单元格属性命令设置面包屑的值

3. 使用菜单单元格类型配置

   a.设置一个单元格为菜单类型

   b.在页面加载命令中，从菜单中获取页面路径，然后更改面包屑的值为该路径

设计时

运行时

单元格设置

EL-级联选择器

使用场景

• 如果选项具有清晰的层次结构，则可以使用 级联选择器来查看和选择。

使用方式

设计时

运行时

单元格设置

备注

• 对象树-JSON

[
    {
        "value": 1,
        "label": "Department1",
        "children": [
            {
                "value": 2,
                "label": "Sub-department1"
            },
            {
                "value": 3,
                "label": "Sub-department2",
                "children": [
                    {
                       "value": 4,
                       "label": "Sub-department2-1"
                    }
                ]
            }
        ]
    },
    {
        "value": 5,
        "label": "Department2"
    },
    {
        "value": 6,
        "label": "Department3"
    }
]

• 二维表-JSON

[
    {"value": 1, "label": "Department1", "parentValue": null},
    {"value": 2, "label": "Department1-1", "parentValue": 1},
    {"value": 3, "label": "Department1-2", "parentValue": 1},
    {"value": 4, "label": "Department1-2-1", "parentValue": 3},
    {"value": 5, "label": "Department2", "parentValue": null},
    {"value": 6, "label": "Department3", "parentValue": null}
]

EL-日期选择器

优劣对比

与活字格内置单元格类型-日期对比

优势：

• 更现代的UI界面

• 更丰富的类型，支持按年/月/日/周/日期时间/月份范围/日期范围/日期时间范围

• 更便于选择历史年份

• 支持头部图表

• 支持添加清空按钮

劣势

• 不支持添加进表格

• 不支持获得焦点时全选文本内容

• 不支持设置单元格样式

• 不支持使用单元格格式

• 不支持下拉按钮显示设置

使用方式

设计时

运行时

单元格设置

EL-输入框

优劣对比

与活字格内置单元格类型-文本框对比

优势：

• 更现代的UI界面

• 支持设置最大输入长度

• 支持尾部图表

• 支持添加清空按钮

劣势

• 不支持添加进表格

• 不支持值唯一校验

• 不支持获得焦点时全选文本内容

• 不支持设置单元格样式

• 不支持使用单元格格式

使用方式

设计时

运行时

单元格设置

EL-计数器

优劣对比

与活字格内置单元格类型-数字对比

优势：

• 更现代的UI界面

• 支持设置最大/最小输入值

劣势

• 不支持添加进表格

• 不支持获得焦点时全选文本内容

• 不支持千分位

• 不支持设置单元格样式

• 不支持使用单元格格式

使用方式

设计时

运行时

单元格设置

EL-导航菜单

优劣对比

与活字格内置单元格类型-菜单对比

优势：

• 更现代的UI界面

• 可以从数据库生成菜单项目

劣势：

• 不支持使用单元格样式

使用方式

设计时

垂直/水平

运行时

单元格设置

EL-分页

优劣对比

与活字格内置单元格类型-分页导航按钮对比

优势：

• 更现代的UI界面

• 弹性布局设置

• 可展示总项数

• 允许用户在运行中更改每页展示行数

• 可设置只有一页时自动隐藏

使用方式

设计时

运行时

单元格设置

EL-进度条

使用场景

• 用户想要使用进度条展示数字

使用方式

设计时

单元格设置

EL-评分

使用场景

• 需要打分时

使用方式

设计时

运行时

单元格设置

EL-选择器

优劣对比

与活字格内置单元格类型-组合框按钮对比

优势：

• 更现代的UI界面

• 支持服务端搜索（详细解释见单元格设置-服务端搜索）

• 移动端也支持输入

• 支持服务端搜索结果缓存（详细解释见单元格设置-绑定数据源）

劣势：

• 不支持添加进表格

• 不支持获得焦点时全选文本内容

• 不支持设置单元格样式

• 不支持使用单元格格式

• 不支持设置下拉列数

• 不支持控制下拉按钮

• 不支持设置下拉框宽度

• 不支持设置最大下拉个数

使用方式

设计时

运行时

单元格设置

限制

• EL-选择器不支持虚拟 DOM，这意味着下拉菜单中的每个项目都会创建至少一个 DOM。 如果下拉列表中有数千个项目时，性能会很差。 这种情况下，最好是使用绑定模式，并启用“可搜索选项”和“服务端搜索”

• 以下情况下，绑定数据库源后查询行数会返回异常

  1. 使用从数据库生成选项，但数据源中有重复数据

  2. 设置查询行数

  3. 返回结果可能小于查询行数的设定值。因为选择器会自动去重，且这步操作在数据源查询后，所以当数据源查询的结果行中有重复数据时，选项会变少。（例如：数据库查询结果为：1,1,2,2,3,...，但设定了查询行数为3，则返回1,1,2给EL-选择器作为选项，此时选择器自动去重，导致最后选项只有2项为1和2）

• El选择器下拉展示内容，当下拉的选项过多时，超过1000个选项时，会出现卡顿等性能问题，体验不好，尽量减少下拉选项中的内容项。

EL-滑块

使用场景

• 创建一个在固定范围内的自由滑动的滑块

使用方式

设计时

运行时

单元格设置

EL-步骤条

使用场景

• 引导用户按照流程完成任务

• 步骤可根据实际应用场景设置

使用方式

设计时

运行时

单元格设置

EL-标签页头

使用场景

• 样式更为现代的标签页头

使用方式

设计时

运行时

单元格设置

EL-标签

使用场景

• 使用标签进行选择和标记

使用方式

设计时

运行时

单元格设置

EL-时间线

使用场景

• 创建时间线（时间轴图）

使用方式

设计时

运行时

单元格设置

EL-时间选择器

优劣对比

与活字格内置单元格类型-时间对比

优势：

• 更现代的UI界面

• 支持设置时间选择模式

• 支持时间范围选择

• 支持头部图标

• 支持清空按钮

劣势

• 不支持添加进表格

• 不支持获得焦点时全选文本内容

• 不支持设置单元格样式

• 不支持使用单元格格式

• 不支持下拉按钮显示设置

使用方式

设计时

运行时

单元格设置

EL-穿梭框

使用场景

• 另一种形式的多选

使用方式

说明：对vue有基础知识的开发者，可以通过这个类型提供的一些接口，定义自己的UI。

• customRender(h, option):

  1. 这个方法可以自定义UI

  2. 用户使用Javascript命令修改此方法

  3. 此函数种有两个参数：

     i.h，表示vue框架中的render方法，它会返回virtual dom

     ii.option，该参数来自于EL-穿梭框，表示穿梭框数据源中的每一项

  4. 此方法返回一个virtual dom

• refreshUI：此方法用于在用户更改 render后重新构建EL-穿梭框，因为 vue 不知道渲染已更改，需要您手动刷新

• getValueFromElement：获取单元格的值

案例

• 任务：创建一个UI类似下图的穿梭框

• 步骤：

  1. 编辑页面加载命令

     （1选择“JavaScript命令”

     （2编辑javascript：

     • 给穿梭框设置一个单元格名称

     • 获取穿梭框的单元格类型

     • 定义个性化render

     • 更换穿梭框的render

     • 刷新UI

  2. 编码元素样式

     （1为穿梭框设定一个CSS类名

     （2编码CSS文件并提交

  3. 如何获取要提交的自定义值

     （1通过getValueFromElement获取单元格类型值

     （2通过cellType.vue.data获取穿梭框数据源

     （3通过自定义数据源和单元格类型值来定义自己的值

• 项目附件：见Example project中的 EL-穿梭框.fgcc

设计时

运行时

单元格设置

EL-文件上传

优劣对比

与活字格内置单元格类型-附件对比

优势：

• 更现代的UI界面

劣势

• 不支持添加进表格

• 不支持使用单元格格式

• 不支持拖放上传文件

使用方式

设计时

运行时

单元格设置

EL-表格

使用场景

• 使用element的表格类型

使用方式

设计时

运行时

单元格设置

补充说明

对于基础的筛选和查询功能，在EL-表格中和原生的表格不太一样，具体解释如下：

• 表头筛选：取消勾选自动根据数据源生成列，在配置表格列中，勾选开启数据过滤，需要多选时勾选数据过滤是否多选。
• 表格查询：对于数据源绑定表的，直接将期望的查询语句设置在 设置数据源 界面中的查询条件中，并将空值查询策略设置为全部记录，这样就可以直接通过文本框进行查询。
• EL表格是展示数据分析场景常用的组件， 当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好，在数据量大的情况下，建议使用EL分页配合EL表格将一页数据减少，或者使用El虚拟表格替换EL表格。

EL-树形控件

使用场景

• 使用element的树形类型，支持拖拽和多选

使用方式

设计时

运行时

单元格设置

补充说明

树中的所有节点都会被实时渲染，因此，在处理超过有1000个子节点的数据时，性能会比较低。

EL-虚拟表格

使用场景

• 一种基础的只读的树形表格，以表格的形式展示树形数据

使用方式

设计时

运行时

单元格设置

Element UI 命令

EL-通知

使用场景

• 在页面角落弹出提醒信息

使用方式

效果示例

命令选项

主题样式

• 成功

• 警告

• 信息

• 失败

EL-消息

使用场景

• 可以在用户活动后展示反馈信息，【EL-通知】常用于显示系统发送的被动通知。

使用方式

效果示例

命令选项

主题样式

• 成功

• 警告

• 信息

• 失败

EL-弹框

使用场景

• 更现代的消息框UI，可用于替换html警报或确认对话框

使用方式

效果示例

命令选项

主题样式

• 无

• 成功

• 警告

• 信息

• 失败

Element UI自定义

允许开发人员使用代码自定义组件UI

策略

• 支持使用html

• 支持使用vue模板

• 支持使用Element组件

限制

• 不支持使用虚拟节点

• 不支持使用自定义组件

自定义EL-回到顶部

说明

• 允许开发者自定义回到顶部的UI

• 支持自定义回到顶部的内容

使用指南

• 在页面中设置一个【EL-回到顶部】类型的单元格

• 为该单元格赋一个CSS类名

• 将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

• 代码演示

• "back-top-custom-render" 表示回到顶部的 css 名称

• 请设置变量“FgcElement”、“BackTopSlots”、“Content”的名称与演示代码相同，否则将不起作用

var FgcElement = FgcElement || {};

FgcElement.BackTopSlots = FgcElement.BackTopSlots || {};

FgcElement.BackTopSlots.Content = FgcElement.BackTopSlots.Content || {};


FgcElement.BackTopSlots.Content["back-top-custom-render"] = function(){
    return "<div style='color: red;'>UP</div>";
}

• 设置前

• 设置后

• 项目附件：见Example project中的 EL-回到顶部.fgcc

自定义EL-日历

说明

• 允许用户自定义日历标头与单元内容

使用指南

• 在页面中设置一个【EL-日历】类型的单元格

• 为该单元格赋一个CSS类名

• 将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

• 代码演示

• “calendar-custom-render”是您为【EL-日历】指定的 CSS 名称。

• 请设置变量“FgcElement”、“CalendarSlots”、“Header”、“Cell”的名称与演示代码相同，否则将不起作用

• 定义日历标头的示例代码中的关键字“data”是 【EL-日历】中的内置数据

• 定义单元格内容的示例代码中的关键字“data”是 【EL-日历】中的内置数据

// data of header
interface data {
  date: String // current month
}
// data of cell
interface data {
  type: String,
   isSelected: Boolean,
   day: Number,
    date: String
}

var FgcElement = FgcElement || {};
 
FgcElement.CalendarSlots = FgcElement.CalendarSlots || {};
 
FgcElement.CalendarSlots.Header = FgcElement.CalendarSlots.Header || {};
 
FgcElement.CalendarSlots.Cell = FgcElement.CalendarSlots.Cell || {};
 
 
FgcElement.CalendarSlots.Header["calendar-custom-render"] = function(){
    return `
    <span>Custom header content</span>
      <span>{{ data.date }}</span>
      <el-button-group>
        <el-button size="small">Previous Year</el-button>
        <el-button size="small">Previous Month</el-button>
        <el-button size="small">Today</el-button>
        <el-button size="small">Next Month</el-button>
        <el-button size="small">Next Year</el-button>
      </el-button-group>
    `;
}
 
FgcElement.CalendarSlots.Cell["calendar-custom-render"] = function(){
    return `
    <p>
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    `
}

• 设置前

• 设置后

• 项目附件：见Example project中的 EL-日历.fgcc

自定义EL-级联选择器

说明

• 允许用户自定义级联节点UI

使用指南

• 在页面中设置一个【EL-级联选择器】类型的单元格

• 为该单元格赋一个CSS类名

• 将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

• 代码演示

• “cascader-custom-render”是您为【EL-级联选择器】指定的 CSS 名称。

• 请设置变量“FgcElement”、“CascaderSlots”、“Node”的名称与演示代码相同，否则将不起作用

• 示例代码中的关键字“data”和“node”是【EL-级联选择器】中的内置数据

interface data {
  node: Node,
  data: Data
}
// node and data are current Node object and node data respectively.

interface Data {
  value: String,
  label: String,
  children: Array<Data>
}

var FgcElement = FgcElement || {};
 
FgcElement.CascaderSlots = FgcElement.CascaderSlots || {};
 
FgcElement.CascaderSlots.Node = FgcElement.CascaderSlots.Node || {};
 
FgcElement.CascaderSlots.Node["cascader-custom-render"] = function(){
    return `
      <span>{{ data.label }}</span>
      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      `
}

• 设置前

• 设置后

• 项目附件：见Example project中的 EL-级联选择器.fgcc

自定义EL-日期选择器

说明

• 允许用户自定义范围分隔符和单元格内容UI

使用指南

• 在页面中设置一个【EL-日期选择器】类型的单元格

• 为该单元格赋一个CSS类名

• 将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

• 代码演示

• “date-picker-custom-render”是您为【EL-日期选择器】指定的 CSS 名称。

• 请设置变量“FgcElement”、“DatePickerSlots”、“RangeSeparater”、“Cell”的名称与演示代码相同，否则将不起作用

• 示例代码中的关键字“cell”是【EL-日期选择器】中每个日期单元格内的内置数据

interface cell {
  column: number
  customClass: string
  disabled: boolean
  end: boolean
  inRange: boolean
  row: number
  selected: Dayjs
  isCurrent: boolean
  isSelected: boolean
  start: boolean
  text: number
  timestamp: number
  date: Date
  dayjs: Dayjs
  type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}

var FgcElement = FgcElement || {};

FgcElement.DatePickerSlots = FgcElement.DatePickerSlots || {};

FgcElement.DatePickerSlots.RangeSeparater = FgcElement.DatePickerSlots.RangeSeparater || {};

FgcElement.DatePickerSlots.Cell = FgcElement.DatePickerSlots.Cell || {};


FgcElement.DatePickerSlots.RangeSeparater["date-picker-custom-render"] = function(){
    return "<span>XXX</span>";
}

FgcElement.DatePickerSlots.Cell["date-picker-custom-render"] = function(){
    return "<div style='color: red;'>{{ cell.text }}</div>"
} 

• 设置前

• 设置后

• 项目附件：见Example project中的 EL-日期选择器-.fgcc

自定义EL-导航菜单

说明

• 允许用户自定义数据源树下叶子节点的UI

使用指南

• 在页面中设置一个【EL-导航菜单】类型的单元格

• 为该单元格赋一个CSS类名

• 将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

• 代码演示

• “nav-menu-custom-render”是您为【EL-导航菜单】指定的 CSS 名称。

• 请设置变量“FgcElement”、“MenuItemSlots”、“Content”的名称与演示代码相同，否则将不起作用

• 示例代码中的关键字“item”是用户定义的每个叶子节点

var FgcElement = FgcElement || {};
 
FgcElement.MenuItemSlots = FgcElement.MenuItemSlots || {};
 
FgcElement.MenuItemSlots.Content = FgcElement.MenuItemSlots.Content || {};
 
FgcElement.MenuItemSlots.Content["nav-menu-custom-render"] = function(){
    return "<div style='color: red;'>{{ item.label}}</div>"
}

• 设置前

• 设置后

• 项目附件：见Example project中的 EL-导航菜单.fgcc

自定义EL-选择器

说明

• 允许用户使用【EL-选择器】的代码以自定义UI

• 支持自定义选择前缀和选项内容

使用指南

• 在页面中设置一个【EL-选择器】类型的单元格

• 为该单元格赋一个CSS类名

• 将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

• 代码演示

• “select-custom-render”是您为【EL-选择器】指定的 CSS 名称。

• 请设置变量“FgcElement”、“SelectSlots”、“Prefix”、“Option”的名称与演示代码相同，否则将不起作用

• 示例代码中的关键字“Option”是数据源中的每一项

interface option
{

  value: number | string

  label: string

}

var FgcElement = FgcElement || {};

FgcElement.SelectSlots = FgcElement.SelectSlots || {};

FgcElement.SelectSlots.Prefix = FgcElement.SelectSlots.Prefix || {};

FgcElement.SelectSlots.Option = FgcElement.SelectSlots.Option || {};

FgcElement.SelectSlots.Prefix["select-custom-render"] = function(){
    return "<span>X</span>";
}

FgcElement.SelectSlots.Option["select-custom-render"] = function(){
    return "<div style='color: red;'>{{ option.label }}</div>";
}

• 设置前

• 设置后

• 项目附件：见Example project中的 EL-选择器.fgcc

自定义EL-表格

说明

• 允许开发者自定义表格单元格的UI

使用指南

• 在页面中设置一个【EL-表格】类型的单元格

• 为该单元格赋一个CSS类名

• 将你的javascript上传进设计器的“设置→自定义JavaScript/CSS”中

• 代码演示

• "column-custom-render" 表示回到顶部的 css 名称

• 设置 javascript 代码自定义表格单元格的外观，将表格单元格文本颜色变为红色。

var FgcElement = FgcElement || {};

FgcElement.TableColumnSlots = FgcElement.TableColumnSlots || {};

FgcElement.TableColumnSlots.Content = FgcElement.TableColumnSlots.Content || {};

FgcElement.TableColumnSlots.Content["column-custom-render"] = function (scope) {
    return `<div style="color: red;">{{ scope.row[scope.column.property] }}<div>`
}

• 设置前

• 设置后

• 项目附件：见Example project中的 EL-表格.fgcc

• 如果您对代码中的参数有任何疑惑，请参阅element-plus官方文档