vue3 element-plus 动态添加el-select 两级联动 并且不能重复选择
时间: 2024-09-26 20:04:48 浏览: 216
在 Vue3 中,结合 Element Plus 组件库创建动态添加的二级联动 `el-select` 具有不允许重复选择的功能,可以按照以下步骤进行:
1. 首先,安装 Element Plus 和相关的依赖:
```bash
npm install element-plus @vue/cli-plugin-element-plus
```
2. 然后,在 Vue 组件中设置数据结构,用于存储选项并跟踪已选的值,例如:
```js
<template>
<div ref="selectWrapper">
<!-- 动态生成的 el-select -->
</div>
</template>
<script>
export default {
data() {
return {
options: [], // 顶级选项
subOptions: {}, // 子级选项对象,key为顶级选项的 value,value为子选项数组
selectedItems: {}, // 已选择的项,key为顶级选项的 value,value为对应的子选项值
};
},
// ...其他生命周期钩子和方法
};
</script>
```
3. 创建一个方法来动态添加新的 `el-select`,并将选择绑定到 `selectedItems`:
```js
methods: {
addSelect(parentId) {
const newSelect = this.$createElement('el-select', {
v-model: null,
placeholder: '请选择',
clearable: true, // 清除按钮
multiple: false, // 一级联动默认单选
filterable: true,
});
// 添加下拉列表
const subOptionsList = this.subOptions[parentId] || [];
subOptionsList.map(subOption => {
newSelect.append(
`<el-option :label="${subOption.label}" :value="${subOption.value}"></el-option>`
);
});
// 添加新 select 到 dom
this.$refs.selectWrapper.append(newSelect);
// 监听新选中的子选项
newSelect.addEventListener('select', (e) => {
if (!this.selectedItems[parentId]) {
this.selectedItems[parentId] = {};
}
this.selectedItems[parentId][e.value] = e.value;
});
},
},
// 初始化时添加第一个 select
mounted() {
const firstOption = this.options.find(option => option.parentId === undefined);
if (firstOption) {
this.addSelect(firstOption.id);
}
},
</script>
```
4. 使用时,通过数据驱动的方式控制哪些选项可以添加,以及初始化时是否需要自动添加第一个 select。
阅读全文