元素 UI - 自定义标签表单 select 组件
Element UI - Custom label form select component
使用文档为 here 的库 element-ui，我想知道是否可以在为 select 选择选项后显示自定义标签组件。
换句话说，是否可以显示一个 slot 而不是标签 :label="item.label"
的一个词
https://jsfiddle.net/q4c3m860/
我在文档中找不到任何内容。
您可以在 :label 属性 中使用 javascript 执行此操作，例如，将所选标签更改为 'foo':
<span style="float: left">{{ item.value === value6 ? 'foo' : item.label }}</span>
这是您的 fiddle 更新：https://jsfiddle.net/jmbldwn/j1mwnpLf/1/
嘿，我遇到了同样的问题，无论是在文档中还是通过谷歌搜索都找不到合适的解决方案。所以我检查了 <el-select>.
的实现
您可以更改 selected 值的标签，方法是更改 <el-option> 中的标签属性并在默认插槽中呈现不同的内容。
原始实现使用 <input> 来显示其当前值，这意味着您不能使用 html 来渲染某些内容。
这是您的 fiddle 更新：https://jsfiddle.net/a4n9up6j/
如果您想显示一些花哨的东西 html，您需要包装 select 并使用一些自定义逻辑。
使用文档为 here 的库 element-ui，我想知道是否可以在为 select 选择选项后显示自定义标签组件。
换句话说，是否可以显示一个 slot 而不是标签 :label="item.label"
https://jsfiddle.net/q4c3m860/
我在文档中找不到任何内容。
您可以在 :label 属性 中使用 javascript 执行此操作，例如，将所选标签更改为 'foo':
<span style="float: left">{{ item.value === value6 ? 'foo' : item.label }}</span>
这是您的 fiddle 更新：https://jsfiddle.net/jmbldwn/j1mwnpLf/1/
嘿，我遇到了同样的问题，无论是在文档中还是通过谷歌搜索都找不到合适的解决方案。所以我检查了 <el-select>.
您可以更改 selected 值的标签，方法是更改 <el-option> 中的标签属性并在默认插槽中呈现不同的内容。
原始实现使用 <input> 来显示其当前值，这意味着您不能使用 html 来渲染某些内容。
这是您的 fiddle 更新：https://jsfiddle.net/a4n9up6j/
如果您想显示一些花哨的东西 html，您需要包装 select 并使用一些自定义逻辑。