el-select 多选模式下嵌套el-tree 点击选中出现Tag 能不能吧默认的删除键去掉
时间: 2023-08-16 16:06:44 浏览: 66
可以通过自定义样式来隐藏默认的删除键。你可以使用以下 CSS 代码来隐藏删除键:
```css
.el-select__tags i.el-tag__close {
display: none;
}
```
将这段代码添加到你的样式文件中,或者直接在页面中使用 `<style>` 标签包裹起来即可。这样就可以隐藏默认的删除键了。
相关问题
el-select多选模式下怎么获取选择的option
在el-select多选模式下,可以通过绑定v-model来获取选择的option,v-model绑定的变量是一个数组,每个选中的option都会被添加到数组中。例如:
```html
<template>
<el-select v-model="selectedOptions" multiple>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
{ value: 'option4', label: '选项4' },
],
selectedOptions: [],
};
},
};
</script>
```
在上面的例子中,v-model绑定的是selectedOptions数组,当用户选择一个或多个选项时,selectedOptions数组会被更新为选择的选项的value值的数组。可以在组件中使用selectedOptions数组来获取选择的option。
el-select 和el-tree 多选
对于 `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)
```
阅读全文