el-transfer选中数据部分标红
时间: 2023-08-05 08:09:45 浏览: 130
如果您想在el-transfer组件中将选中的数据部分标为红色,可以使用`render-format`属性和自定义Render函数来实现。具体步骤如下:
1. 在`el-transfer`组件中添加`render-format`属性,指定自定义Render函数名,如`myRenderFunc`。
2. 在Vue实例或组件中定义`myRenderFunc`函数,该函数接收两个参数:`h`和`option`,`h`是Vue的createElement函数,`option`是当前渲染的选项对象。
3. 在`myRenderFunc`函数中判断当前选项是否被选中,若被选中,则用`h`函数创建一个带有红色背景色的`span`标签,并将当前选项的`label`属性作为其文本内容。
4. 最后在`myRenderFunc`函数中返回第三步中创建的`span`标签。
下面是一个示例代码:
```html
<el-transfer
:data="data"
v-model="value"
:render-format="myRenderFunc">
</el-transfer>
```
```javascript
methods: {
myRenderFunc(h, option) {
if (option.checked) { // 判断当前选项是否被选中
return h('span', {
style: {
backgroundColor: 'red',
color: 'white'
}
}, option.label)
} else {
return h('span', option.label)
}
}
}
```
这样做就可以将选中的数据部分标为红色了。
阅读全文