feat(xlselect): 封装带全选功能的下拉菜单

src/components/XLSelect/index.vue

@@ -2,57 +2,75 @@
   <el-select v-bind="$attrs"
     v-model="selectedOptions"
     @change="handleChange">
-    <el-option v-if="allOption"
-      :key="allSelectLabel"
-      :label="allSelectLabel"
-      :value="allSelectValue"></el-option>
-    <slot></slot>
+    <li class="el-select-dropdown__item all_item "
+      :class="{ 'is-selected': isAll }"
+      @click="selectAll">
+      <span>全选</span>
+    </li>
+    <el-option v-for="str in options"
+      :label="str"
+      :value="str">
+    </el-option>
   </el-select>
 </template>
 
 <script setup>
-const selectedOptions = ref([])
+const selectedOptions = ref([]) // 当前选中的值集合
+const isAll = ref(false) // 全选状态
+
+const emits = defineEmits(['update:modelValue']);
 
 const props = defineProps({
-  allOption: { // 开启全选选项
-    type: Boolean,
-    default: false,
-  },
-  allSelectLabel: { // 全选文案
-    type: String,
-    default: '全选',
-  },
-  allSelectValue: { // 全选绑定值
-    type: [String, Number],
-    default: 'ALL',
+  options: {
+    type: Array,
+    default: () => [],
   },
-  allSingleValue: { // 全选模式（false：返回 option 组，true：返回 allSelectValue 值）
-    type: Boolean,
-    default: false,
-  },
-  modelValue: [String, Object, Array]
-});
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+})
 
 watch(() => props.modelValue, val => {
-  // if (props.allOption) {
-  //   // 判断不是数组则转成数组
-  //   if (!Array.isArray(val)) {
-  //     emits('update:modelValue', [val]);
-  //     selectedOptions.value = [val];
-  //   }
-  // }
+  selectedOptions.value = val;
+  isAll.value = val.length === props.options.length
 }, {
   deep: true,
   immediate: true
 })
 
-const handleChange = (val) => {
-  if (val.includes(props.allSelectValue)) {
-    selectedOptions.value = [props.allSelectValue];
+// 全选点击
+const selectAll = () => {
+  isAll.value = !isAll.value
+  if (isAll.value) {
+    selectedOptions.value = [...props.options];
+    emits('update:modelValue', selectedOptions.value);
   } else {
-    selectedOptions.value = val;
+    selectedOptions.value = [];
+    emits('update:modelValue', selectedOptions.value);
   }
-  // emit('update:modelValue', selectedOptions.value);
 }
 
+const handleChange = (val) => {
+  isAll.value = val.length === props.options.length
+  emits('update:modelValue', val)
+}
 </script>
+
+<style scoped
+  lang="scss">
+
+  .all_item {
+    cursor: pointer;
+  }
+
+  .all_item:hover {
+    background-color: var(--el-fill-color-light);
+  }
+
+  .all_item:hover+.is-hovering {
+    background-color: transparent;
+  }
+
+
+</style>

src/views/bi/finance/index.vue

@@ -6,18 +6,14 @@
         label-position="right"
         label-width="68px"
         inline>
-        <el-form-item label="直播间">
+        <el-form-item label="直播间" ref="ab">
           <xl-select v-model="queryParams.brand"
-            allOption
+            :options="brandList"
             multiple
             clearable
             collapse-tags
             collapse-tags-tooltip
             @change="getList">
-            <el-option v-for="str in brandList"
-              :label="str"
-              :value="str">
-            </el-option>
           </xl-select>
         </el-form-item>
         <el-form-item label="口味">
@@ -131,7 +127,7 @@ const goodsList = ref([]) // 商品
 
 const data = reactive({
   queryParams: {
-    brand: 'a', // 直播间
+    brand: ['a', 'b', 'c'], // 直播间
     taste: '', // 口味
     spec: '', // 规格
     series: '', // 系列
@@ -277,7 +273,7 @@ const detailColumns = ref([
     prop: ''
   }
 ])
-
+const ab = ref(null)
 </script>
 
 <style scoped