el-transfer穿梭框单选
时间: 2023-07-07 07:44:19 浏览: 130
要实现 el-transfer 穿梭框单选,可以通过设置 `:show-checkbox` 属性为 `true`,并将 `:check-position` 属性设置为 `left` 或 `right`,然后在 `:data` 属性中为每个选项添加一个 `checked` 属性,用于表示该选项是否已被选中。当用户点击某个选项时,可以在 `@change` 事件中处理选中状态的改变,例如:
```html
<el-transfer
v-model="selectedData"
:data="data"
:show-checkbox="true"
:check-position="'left'"
@change="handleChange"
>
</el-transfer>
```
```javascript
export default {
data() {
return {
selectedData: [],
data: [
{ key: '1', label: '选项1', checked: false },
{ key: '2', label: '选项2', checked: false },
{ key: '3', label: '选项3', checked: false },
{ key: '4', label: '选项4', checked: false }
]
}
},
methods: {
handleChange() {
// 在 @change 事件中处理选中状态的改变
this.data.forEach(item => {
item.checked = this.selectedData.indexOf(item.key) !== -1
})
}
}
}
```
这样,就可以实现 el-transfer 穿梭框单选的功能了。