Merge pull request #14 from fred-hu/develop

feat: v0.4.0

README.md

@@ -20,8 +20,16 @@ Vue.use(ElSelectAll)
 >组件用例
 
 ```
-<ElSelectAll v-model="storeCodes" filterable multiple collapse-tags @change="onChange" :options="mdoptionsList" />
-<ElSelectAll v-model="storeCodes" filterable multiple collapse-tags @change="onChange" :widthAll="false" :options="mdoptionsList" />
+<ElSelectAll v-model="storeCodes" filterable multiple collapse-tags @change="onChange" :withAll="false" :options="mdoptionsList" />
+
+<ElSelectAll v-model="storeCodes" filterable multiple collapse-tags @change="onChange" :options="mdoptionsList" :props="{ label: 'deviceName', value: 'deviceNo' }" :selectAll="true" :withAll="true" :size="'mini'" style="width: 300px" />
+
+部分api:说明:
+withAll: 是否默认显示全部选项
+options：选项列表
+props：自定义label和value的名称
+selectAll：是否默认选中全部
+size：指定尺寸
 ```
 
 ###### 预览地址:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "el-select-all",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "带有全部选项的el-select组件",
   "scripts": {
     "serve": "vue-cli-service serve",

src/app.vue

@@ -1,27 +1,39 @@
 <template>
   <div id="el-select-all">
     <div>
-      <ElSelectAll v-model="storeCodes" filterable multiple collapse-tags @change="onChange" :options="mdoptionsList" />
-      {{ storeCodes }}
+      <ElSelectAll v-model="storeCodes" filterable multiple collapse-tags @change="onChange" :options="mdoptionsList" :props="{ label: 'deviceName', value: 'deviceNo' }" :selectAll="true" :withAll="true" :size="'mini'" style="width: 300px" />
+    {{ storeCodes }}
     </div>
     <div>
-      <ElSelectAll v-model="storeCodes2" filterable multiple collapse-tags :widthAll="false" @change="onChange2" :options="mdoptionsList" />
-      {{ storeCodes2 }}
+      <ElSelectAll v-model="storeCodes2" filterable multiple collapse-tags @change="onChange2" :options="mdoptionsList2" :selectAll="false" :withAll="true" :size="'mini'" style="width: 300px" />
+    {{ storeCodes2 }}
     </div>
-
   </div>
 </template>
-
 <script>
+import ElSelectAll from '@/components/ElSelectAll.vue'
 export default {
   name: 'App',
-  components: {
-  },
+  components: { ElSelectAll },
   data() {
     return {
-      storeCodes: ['test'],
+      storeCodes: ['testdeviceNo'],
       storeCodes2: ['test'],
-      mdoptionsList: [{
+      mdoptionsList: [
+        {
+          deviceNo: 'testdeviceNo',
+          deviceName: 'testdeviceName',
+        },
+        {
+          deviceNo: 'test2deviceNo',
+          deviceName: 'test2deviceName',
+        },
+        {
+          deviceNo: 'test3deviceNo',
+          deviceName: 'test3deviceName',
+        },
+      ],
+      mdoptionsList2: [{
         key: 'test',
         value: 'test',
         label: 'test'
@@ -43,9 +55,8 @@ export default {
     },
     onChange2(val) {
       console.log(val)
-      console.log(this.storeCodes2)
-    }
-  }
+    },
+  },
 }
 </script>
 

src/components/ElSelectAll.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-select v-model="selected" multiple v-bind="$attrsAll" v-on="$listenserAll" @change="onChange">
-    <el-option v-for="item in mdoptionsList" :key="item.key" :label="item.label" :value="item.value" />
+  <el-select v-model="selected" multiple v-bind="$attrsAll" v-on="$listenserAll" @change="onChange" :size="size">
+    <el-option v-for="item in mdoptionsList" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]" />
   </el-select>
 </template>
 
@@ -12,62 +12,85 @@ export default {
       type: Array,
       default: () => {
         return []
-      }
+      },
     },
     options: {
       type: Array,
       default: () => {
         return []
-      }
+      },
     },
-    widthAll: { // Add the all prop
+    withAll: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
+    selectAll: {
+      type: Boolean,
+      default: false,
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return { label: 'label', value: 'value' }
+      },
+    },
+    size: {
+      type: String,
+      default: 'small',
+    },
   },
   data() {
     const selected = this.value || []
     return {
       selected,
       mdoptionsValue: [],
       oldMdoptionsValue: [],
-      mdoptionsList: []
+      mdoptionsList: [],
     }
   },
   computed: {
     $attrsAll() {
       // const val = this.$vnode.data.model && this.$vnode.data.model.value;
       const result = {
         // value: val,
-        ...this.$attrs
+        ...this.$attrs,
       }
       return result
     },
     $listenserAll() {
       const _this = this
       return Object.assign({}, this.$listeners, {
         change: () => {
-          this.$emit('change', (_this.selected || []).filter(v => {
-            return v !== 'all'
-          }))
+          this.$emit(
+            'change',
+            (_this.selected || []).filter(v => {
+              return v !== 'all'
+            })
+          )
         },
         input: () => {
-          this.$emit('input', (_this.selected || []).filter(v => {
-            return v !== 'all'
-          }))
-        }
-      });
-    }
+          this.$emit(
+            'input',
+            (_this.selected || []).filter(v => {
+              return v !== 'all'
+            })
+          )
+        },
+      })
+    },
   },
   watch: {
     selected: {
       immediate: true,
       deep: true,
       handler(val) {
-        this.$emit('input', (val || []).filter(v => {
-          return v !== 'all'
-        }))
-      }
+        this.$emit(
+          'input',
+          (val || []).filter(v => {
+            return v !== 'all'
+          })
+        )
+      },
     },
     options: {
       immediate: true,
@@ -76,24 +99,41 @@ export default {
         if (!val || val.length === 0) {
           this.mdoptionsList = []
         } else {
-          this.mdoptionsList = this.widthAll ? [{
-            key: 'all',
-            value: 'all',
-            label: '全部'
-          }, ...val] : [...val];
+          this.mdoptionsList = this.withAll
+            ? [
+                {
+                  [this.props.value]: 'all',
+                  [this.props.label]: '全部',
+                },
+                ...val,
+              ]
+            : [...val]
         }
-      }
-    }
+      },
+    },
   },
   mounted() {
+    if (this.selectAll) {
+      this.selected = []
+      for (const item of this.mdoptionsList) {
+        this.selected.push(item[this.props.value])
+      }
+      this.oldMdoptionsValue[1] = this.selected
+      this.$emit(
+        'input',
+        (this.selected || []).filter(v => {
+          return v !== 'all'
+        })
+      )
+    }
   },
   methods: {
     onChange(val) {
       // eslint-disable-next-line no-debugger
       const allValues = []
       // 保留所有值
       for (const item of this.mdoptionsList) {
-        allValues.push(item.value)
+        allValues.push(item[this.props.value])
       }
       // 用来储存上一次的值，可以进行对比
       const oldVal = this.oldMdoptionsValue.length === 1 ? [] : this.oldMdoptionsValue[1] || []
@@ -110,14 +150,17 @@ export default {
       }
       // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
       if (!oldVal.includes('all') && !val.includes('all')) {
-        if (val.length === allValues.length - 1) this.selected = (this.widthAll ? ['all'] : []).concat(val)
+        if (val.length === allValues.length - 1) this.selected = (this.withAll ? ['all'] : []).concat(val)
       }
-      this.$emit('input', (this.selected || []).filter(v => {
-        return v !== 'all'
-      }))
+      this.$emit(
+        'input',
+        (this.selected || []).filter(v => {
+          return v !== 'all'
+        })
+      )
       // 储存当前最后的结果 作为下次的老数据
       this.oldMdoptionsValue[1] = this.selected
-    }
-  }
+    },
+  },
 }
 </script>