ant design vue 1.7.8 穿梭框组件,改变文字颜色,将名字包含于工的选项的文字变成黄色
时间: 2024-04-14 10:26:19 浏览: 73
您可以使用自定义渲染函数来改变穿梭框组件中包含特定文字的选项的文字颜色。下面是一个示例代码,演示如何将名字包含"工"的选项文字变成黄色:
```vue
<template>
<div>
<Transfer
:data-source="dataSource"
:render-format="renderFormat"
></Transfer>
</div>
</template>
<script>
export default {
data() {
return {
dataSource: [
{ key: '1', label: '工程师A' },
{ key: '2', label: '工程师B' },
{ key: '3', label: '设计师A' },
{ key: '4', label: '设计师B' },
],
};
},
methods: {
renderFormat({ label }) {
if (label.includes('工')) {
return <span style="color: yellow;">{label}</span>;
}
return label;
},
},
};
</script>
```
在上面的代码中,我们使用了 `renderFormat` 方法来自定义渲染每个选项的函数。在这个方法里,我们判断了每个选项的 `label` 是否包含"工",如果包含,则将其文字包裹在一个黄色的 `<span>` 标签中进行渲染。
您可以根据实际需求修改 `dataSource` 数组中的选项和判断条件。通过类似的方式,您可以自定义其他样式和效果来满足您的需求。
阅读全文