vue el-transfer 穿梭框组件,改变文字颜色,将名字包含于工的选项的文字变成黄色
时间: 2024-04-14 10:31:00 浏览: 138
您可以使用 `slot-scope` 和条件渲染来自定义穿梭框组件中选项的颜色。下面是一个示例代码:
```html
<el-transfer
v-model="selectedData"
:data="data"
filterable
:filter-method="filterMethod"
:render-content="renderContent"
></el-transfer>
```
```javascript
data() {
return {
selectedData: [],
data: [
{ key: '1', label: '选项1' },
{ key: '2', label: '选项2' },
{ key: '3', label: '选项3' },
// ...
],
};
},
methods: {
filterMethod(query, option) {
return option.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
},
renderContent(h, option) {
// 判断是否包含 "工" 字符串
if (option.label.includes('工')) {
return h('span', { style: 'color: yellow' }, option.label);
}
return h('span', option.label);
},
},
```
在上面的示例中,我们通过 `render-content` 属性自定义了穿梭框组件中选项的渲染方式。使用 `slot-scope` 可以获取到每个选项的数据,然后根据需要进行条件判断和样式设置。在本例中,我们判断选项的标签是否包含 "工" 字符串,如果包含,则将文字颜色设置为黄色。
请根据您的具体需求修改代码中的数据和样式设置。
阅读全文