el-tree 复选框绑值
时间: 2023-09-12 10:03:53 浏览: 94
带复选框checkbox的tree
在 element-ui 中,el-tree 复选框的绑定值是通过 `node-key` 属性和 `default-checked-keys` / `checked-keys` 属性来实现的。其中,`node-key` 属性用于指定每个节点的唯一标识符,而 `default-checked-keys` / `checked-keys` 属性用于指定默认选中的节点或已经选中的节点的标识符。
具体实现步骤如下:
1. 在 el-tree 组件中添加 `node-key` 属性来指定节点的唯一标识符,例如:
```html
<el-tree :data="data" :node-key="nodeKey"></el-tree>
```
2. 在 data 中定义一个 `nodeKey` 变量来保存节点的唯一标识符,例如:
```javascript
data() {
return {
nodeKey: 'id',
// ...
}
}
```
3. 在 el-tree 组件中添加 `default-checked-keys` / `checked-keys` 属性来指定默认选中的节点或已经选中的节点的标识符,例如:
```html
<el-tree :data="data" :node-key="nodeKey" :checked-keys="checkedKeys"></el-tree>
```
4. 在 data 中定义一个 `checkedKeys` 变量来保存默认选中的节点或已经选中的节点的标识符,例如:
```javascript
data() {
return {
nodeKey: 'id',
checkedKeys: [1, 2],
// ...
}
}
```
这样,el-tree 组件就会根据 `node-key` 属性和 `default-checked-keys` / `checked-keys` 属性来绑定复选框的值了。当用户选中或取消选中一个节点时,`checkedKeys` 变量会自动更新。
阅读全文