el-select 多选模式下嵌套el-tree 点击选中出现Tag 能不能吧默认的删除键去掉
时间: 2023-08-16 17:06:44 浏览: 93
可以通过自定义多选模式下的标签模板来实现去掉默认的删除键。你可以在 el-select 的标签模板中一个自定义的 slot,然后在该 slot 中显示每个选中项的内容,而不显示删除键。
以下是一个示例代码:
```html
<template>
<el-select v-model="selectedItems" multiple>
<el-option
v-for="item in treeData"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
<template #tags>
<span v-for="(item, index) in selectedItems" :key="index" class="el-tag">
{{ item.label }}
</span>
</template>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedItems: [],
treeData: [
// 树形数据源
],
};
},
};
</script>
```
在上面的代码中,通过使用 el-option 标签来生成 el-select 的选项,然后通过使用 template 的 tags slot 来自定义标签模板。在该 slot 中,我们使用一个循环来显示选中项的内容,并使用 el-tag 样式类来渲染每个选中项。
通过这种方式,你可以实现在 el-select 多选模式下嵌套 el-tree,并且去掉默认的删除键。
阅读全文