【Element UI】 自定义渲染之- 下拉框
本帖最后由 Edric.Li 于 2022-8-30 21:58 编辑系列教程第一篇大概介绍介绍什么是自定义渲染吧。简而言之呢，就是说，在某些组件中，你可以编写代码，来定制你想渲染成什么样子。首先呢，自定义渲染需要编写代码，那就有一丢丢的门槛了，主要是 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啊:L:L:L:L
qq5168 发表于 2022-8-30 21:26
8.0.100。0这边版本哪里下载的啊，官方才8.0.4啊
附件已更新，可以重新下载了 Edric.Li 发表于 2022-8-30 21:59
附件已更新，可以重新下载了
非常感谢大神:handshake Edric.Li 发表于 2022-8-30 21:59
附件已更新，可以重新下载了
大神，要是说，我使用别的列（除选择列和显示列外）做子项目项，要怎么改呢（使用数据库的项目） 本帖最后由 Edric.Li 于 2022-9-1 18:15 编辑
给你做了个Demo（el-select-2），可以参考下
如果需要数据库其它字段的话，就不能直接用 数据绑定了，可以通过设置变量命令，然后 变量的值来源于数据库，这样的话，想要什么列就可以查什么列，JS部分没有什么大的变化，只要把数据传到组件中，就可以了。
Edric.Li 发表于 2022-9-1 18:13
给你做了个Demo（el-select-2），可以参考下
如果需要数据库其它字段的话，就不能直接用 数据绑定了，可以 ...
大神这个目前来说完美解决，还是期待官方原生支持子项目，就省事了，毕竟要是选择器多的情况下，配置还是比较慢的:handshake
页:
[1]