fix(MdTable): reactive selection (#1674)

* fix(MdTable): reactive selection fix #1348 * fix(MdTableRow): add addSelectableItem on nextTick to avoid destory after created * fix(MdTable): mdModelId necessary warning * fix(MdTableCellSelection): replace created with watch immediate * fix(MdTable): fix warn message * fix(MdTable): Generate UUID by object instance with WeakMap to avoid breaking change * fix(MdTable): remove unused Vue
vuematerial · May 13, 2018 · ddee303 · ddee303
1 parent 09b8573
commit ddee303
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 28 deletions.
diff --git a/src/components/MdTable/MdTable.vue b/src/components/MdTable/MdTable.vue
@@ -27,8 +27,8 @@
         <tbody v-else-if="value.length">
           <md-table-row-ghost
             v-for="(item, index) in value"
-            :key="getRowId(item[mdModelId])"
-            :md-id="getRowId(item[mdModelId])"
+            :key="getRowId(item, mdModelId)"
+            :md-id="getRowId(item, mdModelId)"
             :md-index="index"
             :md-item="item">
             <slot name="md-table-row" :item="item" />
@@ -153,7 +153,8 @@
           getModel: this.getModel,
           getModelItem: this.getModelItem,
           selectingMode: null
-        }
+        },
+        itemsUuidMap: new WeakMap()
       }
     },
     computed: {
@@ -263,12 +264,21 @@
       emitEvent (eventName, value) {
         this.$emit(eventName, value)
       },
-      getRowId (id) {
+      getRowId (item, propertyName) {
+        let id = item[propertyName]
+
         if (id) {
           return id
         }
 
-        return 'md-row-' + MdUuid()
+        id = this.itemsUuidMap.get(item)
+
+        if (!id) {
+          id = 'md-row-' + MdUuid()
+          this.itemsUuidMap.set(item, id)
+        }
+
+        return id
       },
       setScroll ($event) {
         raf(() => {

diff --git a/src/components/MdTable/MdTableCellSelection.vue b/src/components/MdTable/MdTableCellSelection.vue
@@ -20,8 +20,11 @@
       isSelected: false
     }),
     watch: {
-      value () {
-        this.isSelected = this.value
+      value: {
+        immediate: true,
+        handler (value) {
+          this.isSelected = value
+        }
       }
     },
     methods: {

diff --git a/src/components/MdTable/MdTableRow.vue b/src/components/MdTable/MdTableRow.vue
@@ -1,7 +1,8 @@
 <template>
   <tr class="md-table-row" :class="rowClasses" @click="onClick" v-on="$listeners">
     <md-table-cell-selection
-      v-model="isSelected"
+      :value="isMultipleSelected"
+      @input="selected => selected ? addSelection() : removeSelection()"
       :md-disabled="mdDisabled"
       :md-selectable="mdSelectable === 'multiple'"
       :md-row-id="mdIndex"
@@ -32,12 +33,14 @@
     },
     inject: ['MdTable'],
     data: () => ({
-      index: null,
-      isSelected: false
+      index: null
     }),
     computed: {
       selectableCount () {
-        return Object.keys(this.MdTable.selectable).length
+        return this.MdTable.selectable.length
+      },
+      isMultipleSelected () {
+        return this.MdTable.selectedItems.includes(this.mdItem)
       },
       isSingleSelected () {
         return this.MdTable.singleSelection === this.mdItem
@@ -52,7 +55,7 @@
         if (this.MdTable.hasValue) {
           return {
             'md-has-selection': !this.mdDisabled && (this.mdAutoSelect || this.hasSingleSelection),
-            'md-selected': this.isSelected,
+            'md-selected': this.isMultipleSelected,
             'md-selected-single': this.isSingleSelected
           }
         }
@@ -69,18 +72,6 @@
           this.addSelectableItem()
         }
       },
-      isSelected (val) {
-        let noChange = (val && this.isInSelectedItems) || (!val && !this.isInSelectedItems)
-
-        if (noChange) {
-          return false
-        }
-
-        this.MdTable.manageItemSelection(this.mdItem)
-      },
-      isInSelectedItems (val) {
-        this.isSelected = val
-      },
       mdSelectable () {
         this.MdTable.selectingMode = this.mdSelectable
       },
@@ -100,7 +91,17 @@
         }
       },
       toggleSelection () {
-        this.isSelected = !this.isSelected
+        this.MdTable.manageItemSelection(this.mdItem)
+      },
+      addSelection () {
+        if (!this.isMultipleSelected) {
+          this.MdTable.selectedItems.push(this.mdItem)
+        }
+      },
+      removeSelection () {
+        if (this.isMultipleSelected) {
+          this.MdTable.selectedItems = this.MdTable.selectedItems.filter(target => target !== this.mdItem)
+        }
       },
       selectRowIfSingle () {
         if (this.MdTable.singleSelection === this.mdItem) {
@@ -132,8 +133,10 @@
       }
     },
     created () {
-      this.addSelectableItem()
-      this.MdTable.selectingMode = this.mdSelectable
+      this.$nextTick(() => {
+        this.addSelectableItem()
+        this.MdTable.selectingMode = this.mdSelectable
+      })
     },
     beforeDestroy () {
       this.removeSelectableItem()

diff --git a/src/components/MdTable/MdTableRowGhost.vue b/src/components/MdTable/MdTableRowGhost.vue
@@ -1,7 +1,6 @@
 <script>
   export default {
     name: 'MdTableRowGhost',
-    abstract: true,
     props: {
       mdIndex: [String, Number],
       mdId: [String, Number],