el-select搭配el-tree 树形多选框选中,select框无内容
时间: 2023-11-01 10:08:31 浏览: 118
el-select-tree:ElementUI的el-select与el-tree结合
5星 · 资源好评率100%
要实现el-select搭配el-tree树形多选框选中后,select框无内容的效果,可以通过以下步骤实现:
1. 使用el-select组件作为选择器,并设置multiple属性以支持多选。
2. 在el-select组件内部嵌套el-option组件,并将其状态设置为disabled,防止用户直接点击选项。
3. 在el-option组件内部嵌套el-tree组件,并设置相关属性,如data、props、ref等。
4. 在el-tree组件上绑定check-change事件,并在事件处理函数handleNodeClick中获取选中的节点数据。
5. 根据选中的节点数据,动态渲染el-select组件的内容。
相关代码如下所示:
```html
<el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false">
<el-option :value="selectTree" class="setstyle" disabled>
<el-tree :data="list" :props="defaultProps" ref="tree" show-checkbox check-strictly :expand-on-click-node="false" check-on-click-node @check-change="handleNodeClick"></el-tree>
</el-option>
</el-select>
```
```js
export default {
data() {
return {
value: [], // 选中的节点值
list: [], // 树形数据
defaultProps: {
children: 'children', // 子节点字段名
label: 'label', // 节点显示的字段名
}
};
},
methods: {
handleNodeClick(data) {
// 获取选中的节点数据
this.value = data.map(node => node.label);
},
},
};
```
阅读全文