建筑工地网站_在哪里可以做网站_个人网站制作模板_运营推广渠道有哪些

基于el-select 二次封装

<template><div><!-- el-select 绑定的值 --><el-selectv-model="selectedValues":multiple="multiple":filterable="filterable":clearable="clearable":placeholder="`请选择${name}`":style="{width: width}"><!-- 全选复选框 --><divv-if="multiple"style="display: flex; align-items: center; padding: 0 20px;"><el-checkbox:value="isAllSelected"@change="handleSelectAll">全选</el-checkbox></div><!-- 选项列表 --><el-optionv-for="item in options":key="item[valueKey]":label="item[labelKey]":value="item[valueKey]"/></el-select></div>
</template><script>
export default {/***** 作者: Lenovo-【Lindon】*** 文件名称: SelectAll*** 文件创建日期: 2025/3/20 10:36****/name: 'SelectAll',props: {multiple: {type: Boolean,default: true},width: {type: String,default: '370px'},filterable: {type: Boolean,default: true},clearable: {type: Boolean,default: true},name: {type: String,default: ''},// 选项options: {type: Array,default: () => []},labelKey: {type: String,default: 'label'},valueKey: {type: String,default: 'value'},// 已选中的值// 双向绑定的值,谨慎修改value: {type: Array,default: () => []}},data() {return {};},computed: {// 判断是否全选isAllSelected() {if (this.selectedValues) {const allValues = this.options.map(option => option[this.valueKey]);return this.selectedValues.length === allValues.length;}},// 双向绑定选中值selectedValues: {get() {debugger;return this.value;},set(val) {debugger;this.$emit('input', val);}}},methods: {// 全选逻辑handleSelectAll(val) {const allValues = this.options.map(option => option[this.valueKey]);if (val) {// 如果勾选全选，则将所有选项的值添加到选中值中this.selectedValues = allValues;} else {// 如果取消全选，则清空选中值this.selectedValues = [];}}}
};
</script><style scoped>
/* 全选复选框样式 */
.el-checkbox {margin-bottom: 10px;
}
</style>

页面组件应用

        <el-form-itemlabel="合作店面"prop="orgIds"><SelectAllv-model="form.orgIds"name="工作地方"width="370px":options="AllOrg":label-key="'name'":value-key="'id'"/></el-form-item>

示例图