el-select 和el-tree 多选
时间: 2023-07-20 09:28:12 浏览: 125
对于 `el-select` 组件,可以通过设置 `multiple` 属性来开启多选模式,例如:
```html
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
```
对于 `el-tree` 组件,可以通过设置 `check-strictly` 属性来开启多选模式,同时还需要设置 `node-key` 属性来指定节点的唯一标识符,例如:
```html
<el-tree :data="treeData" :props="treeProps" :node-key="nodeKey" :check-strictly="true"></el-tree>
```
```javascript
export default {
data() {
return {
treeData: [...],
treeProps: {
label: 'name',
children: 'children',
disabled: 'disabled',
isLeaf: 'isLeaf'
},
nodeKey: 'id'
}
}
}
```
在多选模式下,可以通过 `getCheckedNodes` 方法获取选中的节点列表,例如:
```javascript
const checkedNodes = this.$refs.tree.getCheckedNodes()
```
同时也可以通过 `setCheckedNodes` 方法设置选中的节点列表,例如:
```javascript
this.$refs.tree.setCheckedNodes(checkedNodes)
```
阅读全文
相关推荐


















