【Element UI】 自定义渲染之- 下拉框

系列教程第一篇大概介绍介绍什么是自定义渲染吧。

简而言之呢，就是说，在某些组件中，你可以编写代码，来定制你想渲染成什么样子。

首先呢，自定义渲染需要编写代码，那就有一丢丢的门槛了，主要是 Javascript部分，样式部分，不包含在内。如果你使用过Vue.js 和 Element UI 的开发经验，那操作起来就更顺手了。

这篇帖子将介绍 选择框(Select) 支持的自定义渲染

选择框可以定制的有两部分

1. 前缀

2. 下拉选项

先附上完整代码：

大概奏这么一点点

然后大概解析一下：

首先 需要定义一个 FgcElement，Element 源代码中将从这里面获取获取自定义的内容

然后 SelectSlots 是Select 选择框在源代码中定义的名称。

接下来就是自定义部分的内容了。首先看到的 "select-custom-render" 这个是什么东西呢？

这个是在设计器中设置的 CSS类名

剩下的基本就是固定语法了， 你可以 发挥的地方就是在这个小小的函数中

需要返回一个字符串，做为模板字符串，支持vue.js的语法

以上内容，阅读源代码找出来的，估计是隐藏的高级功能。

会CSS，想换成什么样式就换什么样式

lovert 发表于 2022-8-30 17:46
会CSS，想换成什么样式就换什么样式

我的理解，CSS 修改的是已有Dom上的样式，自定义插槽是添加新的Dom，像楼主给出的选择器支持多列的例子用自定义CSS是不好实现的

8.0.100。0这边版本哪里下载的啊，官方才8.0.4啊

qq5168 发表于 2022-8-30 21:26
8.0.100。0这边版本哪里下载的啊，官方才8.0.4啊

附件已更新，可以重新下载了

Edric.Li 发表于 2022-8-30 21:59
附件已更新，可以重新下载了

非常感谢大神

Edric.Li 发表于 2022-8-30 21:59
附件已更新，可以重新下载了

大神，要是说，我使用别的列（除选择列和显示列外）做子项目项，要怎么改呢（使用数据库的项目）

给你做了个Demo（el-select-2），可以参考下
如果需要数据库其它字段的话，就不能直接用 数据绑定了，可以通过设置变量命令，然后 变量的值来源于数据库，这样的话，想要什么列就可以查什么列，JS部分没有什么大的变化，只要把数据传到组件中，就可以了。

Edric.Li 发表于 2022-9-1 18:13
给你做了个Demo（el-select-2），可以参考下
如果需要数据库其它字段的话，就不能直接用 数据绑定了，可以 ...

大神这个目前来说完美解决，还是期待官方原生支持子项目，就省事了，毕竟要是选择器多的情况下，配置还是比较慢的