Select: 添加全选、全不选功能

ElemeFE · Aug 5, 2021 · edba3e9 · edba3e9
1 parent 390264f
commit edba3e9
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 1 deletion.
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
@@ -210,6 +210,21 @@
       :value="item.value">
     </el-option>
   </el-select>
+
+  <el-select 
+    v-model="value3"
+    multiple
+    allOption
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="请选择">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -233,7 +248,8 @@
           label: '北京烤鸭'
         }],
         value1: [],
-        value2: []
+        value2: [],
+        value3: []
       }
     }
   }

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
@@ -119,6 +119,10 @@
             created
             v-if="showNewOption">
           </el-option>
+          <div class="chooseAllOrNot" v-if="multiple && allOption">
+            <div class="chooseAll" @click="handleChooseAll">全选</div>
+            <div class="chooseNot" @click="handleChooseNot">全不选</div>
+          </div>
           <slot></slot>
         </el-scrollbar>
         <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
@@ -283,6 +287,7 @@
       remoteMethod: Function,
       filterMethod: Function,
       multiple: Boolean,
+      allOption: Boolean,
       multipleLimit: {
         type: Number,
         default: 0
@@ -440,6 +445,20 @@
     },
 
     methods: {
+      handleChooseAll() {
+        if (this.multiple) {
+          if (this.multipleLimit > 0 && this.options.length > this.multipleLimit) {
+            throw new Error(this.multipleLimit + '低于' + this.options.length + '，无法全部选中');
+          }
+        }
+        let value = Array.from(this.options, ({value})=>value);
+        this.$emit('input', value);
+        this.emitChange(value);
+      },
+      handleChooseNot() {
+        this.$emit('input', []);
+        this.emitChange([]);
+      },
       handleComposition(event) {
         const text = event.target.value;
         if (event.type === 'compositionend') {

diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
@@ -146,3 +146,37 @@
     }
   }
 }
+
+
+.chooseAllOrNot {
+  display: flex;
+  height: $--select-option-height + 10px;
+  width: 100%;
+  justify-content: center;
+}
+
+.chooseAll {
+  font-size: $--select-font-size;
+  margin-top: 5px;
+  width: 45%;
+  border-radius: 5% 0 0 5%;
+  border: 1px solid #CCCCCC;
+  height: $--select-option-height;
+  line-height: $--select-option-height;
+  text-align: center;
+  cursor: pointer;
+  background-color: white;
+}
+
+.chooseNot {
+  cursor: pointer;
+  background-color: white;
+  font-size: $--select-font-size;
+  margin-top: 5px;
+  width: 45%;
+  border: 1px solid #CCCCCC;
+  height: $--select-option-height;
+  line-height: $--select-option-height;
+  text-align: center;
+  border-radius: 0 5% 5% 0;
+}
diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
@@ -635,6 +635,61 @@ describe('Select', () => {
     }, 50);
   });
 
+  it('multiple and allOption', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value" multiple allOption>
+            <el-option
+              v-for="item in options"
+              :label="item.label"
+              :key="item.value"
+              :value="item.value">
+              <p>{{item.label}} {{item.value}}</p>
+            </el-option>
+          </el-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          options: [{
+            value: '选项1',
+            label: '黄金糕'
+          }, {
+            value: '选项2',
+            label: '双皮奶'
+          }, {
+            value: '选项3',
+            label: '蚵仔煎'
+          }, {
+            value: '选项4',
+            label: '龙须面'
+          }, {
+            value: '选项5',
+            label: '北京烤鸭'
+          }],
+          value: []
+        };
+      }
+    }, true);
+    expect(vm.$el.querySelectorAll('.chooseAllOrNot').length).to.equal(1);
+
+    const chooseNot = vm.$el.querySelectorAll('.chooseNot');
+    const chooseAll = vm.$el.querySelectorAll('.chooseAll');
+    setTimeout(() => {
+      chooseAll[0].click();
+      setTimeout(() => {
+        expect(vm.value.length).to.equal(5);
+        chooseNot[0].click();
+        setTimeout(() => {
+          expect(vm.value.length).to.equal(0);
+          done();
+        }, 50);
+      }, 50);
+    }, 50);
+  });
+
   it('multiple remote search', done => {
     const remoteMethod = vm => {
       return query => {