el-select 多选模式下嵌套el-tree 点击选中出现Tag 能不能吧默认的删除键去掉
时间: 2023-08-16 12:06:13 浏览: 54
可以通过自定义多选模式下的 Tag 组件来实现隐藏删除键。
首先,在 el-select 的多选模式下,通过设置 `collapse-tags` 属性来隐藏 Tag 的删除键:
```html
<el-select v-model="selectedOptions" multiple collapse-tags>
<!-- 嵌套的 el-tree -->
</el-select>
```
然后,自定义多选模式下的 Tag 组件,将删除键隐藏:
```html
<template>
<el-tag :key="tag" :closable="false">
{{ tag }}
</el-tag>
</template>
<script>
export default {
name: 'CustomTag',
props: {
tag: {
type: String,
required: true
}
}
}
</script>
```
最后,在 el-select 中使用自定义的 Tag 组件:
```html
<el-select v-model="selectedOptions" multiple collapse-tags>
<template #tags>
<custom-tag
v-for="option in selectedOptions"
:key="option"
:tag="option"
></custom-tag>
</template>
<!-- 嵌套的 el-tree -->
</el-select>
```
这样,就可以在多选模式下嵌套 el-tree,并且隐藏默认的删除键。同时,自定义的 Tag 组件将替代原来的 Tag 显示选中项。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)