在Vue2和Element UI中，可以通过二次封装el-select组件来实现多选功能，并添加全选组件。以下是一个简单的示例：
- 创建一个全选组件
SelectAll.vue:
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</template>
<script>
export default {
props: {
options: {
type: Array,
default: () => []
},
isIndeterminate: {
type: Boolean,
default: false
}
},
data() {
return {
checkAll: false
};
},
methods: {
handleCheckAllChange(val) {
if (val) {
this.$emit('update:selected', this.options.map(item => item.value));
} else {
this.$emit('update:selected', []);
}
}
}
};
</script>- 二次封装
el-select组件，并使用全选组件SelectAll:
<template>
<div>
<select-all :options="options" :selected="selected" :is-indeterminate="isIndeterminate" @update:selected="handleSelectAll"></select-all>
<el-select v-model="selected" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
import SelectAll from './SelectAll.vue';
export default {
components: {
SelectAll
},
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
// ...更多选项
],
selected: [],
isIndeterminate: false,
};
},
methods: {
handleSelectAll(selected) {
this.isIndeterminate = false;
if (selected.length === this.options.length) {
this.isIndeterminate = false;
} else if (selected.length === 0) {
this.isIndeterminate = false;
} else {
this.isIndeterminate = true;
}
}
}
};
</script>在这个例子中，SelectAll组件是一个可复用的全选组件，可以在多个地方使用。MultiSelect组件封装了el-select和全选组件，并处理了全选逻辑。在MultiSelect中，你可以通过options传入下拉菜单的选项，通过selected来获取或设置已选择的值，并且可以通过监听update:selected事件来响应全选操作。