update Select

梁灏
1 parent 6f8608bb
Showing 2 changed files with 26 additions and 10 deletions Show diff stats
examples/routers/select.vue
src/components/select/select.vue
 <template>
-    <div style="width: 200px;margin: 100px;">
-        {{ model }}
-        <i-select v-model="model" filterable remote :remote-method="remoteMethod" :loading="loading" clearable style="width:200px">
-            <i-option v-for="option in options" :value="option.value" :key="option">{{option.label}}</i-option>
-        </i-select>
-        <!--<Button @click="handleAdd">+</Button>-->
-    </div>
+    <Row>
+        <i-col span="4">{{model}}</i-col>
+        <i-col span="8">
+            <i-select v-model="model" multiple filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
+                <i-option v-for="option in options" :value="option.value" :key="option">{{option.label}}</i-option>
+            </i-select>
+        </i-col>
+    </Row>
 </template>
  
 <script>
     export default {
         data () {
             return {
-                model: '',
+                model: [],
                 options: [
  
                 ],
@@ -300,7 +300,7 @@
             },
             updateMultipleSelected (init = false, slot = false) {
                 if (this.multiple && Array.isArray(this.model)) {
-                    let selected = [];
+                    let selected = this.remote ? this.selectedMultiple : [];
  
                     for (let i = 0; i < this.model.length; i++) {
                         const model = this.model[i];
@@ -317,7 +317,16 @@
                         }
                     }
  
-                    this.selectedMultiple = selected;
+                    const selectedArray = [];
+                    const selectedObject = {};
+                    selected.forEach(item => {
+                        if (!selectedObject[item.value]) {
+                            selectedArray.push(item);
+                            selectedObject[item.value] = 1;
+                        }
+                    });
+
+                    this.selectedMultiple = this.remote ? selectedArray : selected;
  
                     if (slot) {
                         let selectedModel = [];
@@ -340,6 +349,12 @@
                 if (this.disabled) {
                     return false;
                 }
+
+                if (this.remote) {
+                    const tag = this.model[index];
+                    this.selectedMultiple = this.selectedMultiple.filter(item => item.value !== tag);
+                }
+
                 this.model.splice(index, 1);
  
                 if (this.filterable && this.visible) {