+ {{ data.day.split('-').slice(1).join('-') }} + {{ data.isSelected ? '✔️' : '' }} +
+ ` +} +``` + +* 设置前 + + + +* 设置后 + + + +* 项目附件：[见Example project中的 EL-日历.fgcc](https://gitee.com/GrapeCity/hzg-element-plus-plugin-source-code/blob/master/README_DEMO/EL-%E6%97%A5%E5%8E%86.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 +} +``` + +```纯文本 +var FgcElement = FgcElement || {}; + +FgcElement.CascaderSlots = FgcElement.CascaderSlots || {}; + +FgcElement.CascaderSlots.Node = FgcElement.CascaderSlots.Node || {}; + +FgcElement.CascaderSlots.Node["cascader-custom-render"] = function(){ + return ` + {{ data.label }} + ({{ data.children.length }}) + ` +} +``` + +* 设置前 + + + +* 设置后 + + + +* 项目附件：[见Example project中的 EL-级联选择器.fgcc](https://gitee.com/GrapeCity/hzg-element-plus-plugin-source-code/blob/master/README_DEMO/EL-%E7%BA%A7%E8%81%94%E9%80%89%E6%8B%A9%E5%99%A8.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 "XXX"; +} + +FgcElement.DatePickerSlots.Cell["date-picker-custom-render"] = function(){ + return "