el-select 多选模式下嵌套el-tree 点击选中出现Tag 能不能吧默认的删除键去掉
时间: 2023-08-16 16:06:13 浏览: 164
可以通过自定义多选模式下的 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 显示选中项。
阅读全文