el-tree-transfer 树形穿梭框 默认复选框
时间: 2024-09-06 14:05:23 浏览: 44
el-tree实现el-transfer(穿梭框)的效果代码(全)
5星 · 资源好评率100%
el-tree-transfer 是 Element UI 中的一个组件,它实现了一个树形穿梭框,该组件可以用来实现两个树形控件之间节点的转移。在使用 el-tree-transfer 时,可以通过设置默认复选框来决定哪些节点在初始状态下被选中。
通常,要在 el-tree-transfer 中设置默认复选框,你可以在树节点的数据中添加一个字段来控制复选框的选中状态。例如,可以在数据中添加一个 `checked` 字段,当该字段为 `true` 时,对应的树节点复选框会被默认选中。下面是一个简单的使用示例:
```html
<template>
<el-tree-transfer
:data="data"
:props="defaultProps"
:target-keys="targetKeys"
:titles="['源列表', '目标列表']"
v-model="value"
@change="handleChange"
></el-tree-transfer>
</template>
<script>
export default {
data() {
return {
value: [], // 绑定选中的值
targetKeys: [], // 绑定目标树的选中节点
data: [
{
key: 1,
label: '一级 1',
children: [
{ key: 4, label: '二级 1-1', checked: true },
{ key: 5, label: '二级 1-2' },
// 其他节点...
],
},
// 其他一级节点...
],
defaultProps: {
children: 'children',
label: 'label',
},
};
},
methods: {
handleChange(value, direction, movedKeys) {
// 穿梭框内容改变时触发
},
},
};
</script>
```
在上面的代码中,`data` 数组定义了树形结构的数据,其中每个节点都可能包含一个 `checked` 字段。当 `checked` 字段为 `true` 时,对应的树节点在初始化时会被默认选中。
阅读全文