From b2da61186d3ddfce2be7ebd58b9a44074b32b24f Mon Sep 17 00:00:00 2001
From: dwqs <461147874@qq.com>
Date: Wed, 7 Mar 2018 18:20:29 +0800
Subject: [PATCH] feat: Seperate checkbox-list from table

---
 src/components/checkbox-list.vue | 120 +++++++++++++++++++++++++++++++
 src/components/checkbox.vue      |  18 ++---
 src/components/table-column.vue  |   5 +-
 src/components/table-header.vue  |   6 +-
 src/components/table.vue         |  89 ++++++++++++++---------
 5 files changed, 193 insertions(+), 45 deletions(-)
 create mode 100644 src/components/checkbox-list.vue

diff --git a/src/components/checkbox-list.vue b/src/components/checkbox-list.vue
new file mode 100644
index 0000000..e0ad208
--- /dev/null
+++ b/src/components/checkbox-list.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="v2-checkbox-list-wrap" :style="{
+        width: column.width + 'px',
+        height: '100%',
+        left: table.leftColumns.length ? '0' : -left + 'px',
+        borderRight: table.leftColumns.length ? 'none' : '1px solid #dfe6ec'
+    }">
+        <div class="v2-checkbox-item checked-all" :style="getItemStyle(0)">
+            <checkbox :cur-row-index="-1"></checkbox>
+        </div>
+        <div ref="list" :style="{
+                position: 'relative',
+                top: '0px',
+                height: table.bodyHeight > table.VOEWPORT_MIN_HEIGHT ? table.bodyHeight + 'px' : 'auto',
+                overflow: table.bodyHeight > table.VOEWPORT_MIN_HEIGHT ? 'hidden' : 'auto',
+            }">
+            <ul class="v2-checkbox-list" :style="{height: this.list.length * this.h + 'px'}">
+                <li class="v2-checkbox-item" v-for="(row, index) in list" :key="index" :style="getItemStyle(index)">
+                    <checkbox :cur-row-index="index" :cur-row="row"></checkbox>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import CheckBox from './checkbox.vue';
+
+    export default {
+        props: {
+            column: [Object],
+            left: {
+                type: Number,
+                default: 0
+            },
+            top: {
+                type: Number,
+                default: 0
+            }
+        },
+
+        inject: ['table'],
+
+        data () {
+            return {
+                list: []
+            };
+        },
+
+        computed: {
+            h () {
+                return isNaN(parseInt(this.table.colHeight, 10)) ? 40 : `${parseInt(this.table.colHeight, 10)}`;
+            }
+        },
+
+        watch: {
+            top (val, oldVal) {
+                this.$refs.list.scrollTop = val;
+            },
+
+            'table.data' (val, oldVal) {
+                if (oldVal.length !== val.length) {
+                    this.list = [].concat(val);
+                }
+            }
+        },
+
+        methods: {
+            getItemStyle (index) {
+                const style = {};
+
+                style.width = isNaN(parseInt(this.column.width, 10)) ? '45px' : `${parseInt(this.column.width, 10)}px`;
+                style.height = isNaN(parseInt(this.table.colHeight, 10)) ? '40px' : `${parseInt(this.table.colHeight, 10)}px`;
+                style.textAlign = ['left', 'center', 'right'].indexOf(this.column.align) > -1 ? this.column.align : 'center';
+                style.lineHeight = style.height;
+                style.top = parseInt(style.height, 10) * index + 'px';
+
+                return style;
+            }
+        },
+
+        mounted () {
+            if (this.table.data.length) {
+                this.list = [].concat(this.table.data);
+            }
+        },
+
+        components: {
+            'checkbox': CheckBox
+        }
+    };
+</script>
+
+<style lang="less">
+    .v2-checkbox-list-wrap {
+        position: absolute;
+        z-index: 99;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        background: #FFFFFF;
+        border-left: 1px solid #dfe6ec;
+        border-top: 1px solid #dfe6ec;
+    }
+    .v2-checkbox-list {
+        position: relative;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    .v2-checkbox-item {
+        position: absolute;
+        box-sizing: border-box;
+        border-bottom: 1px solid #dfe6ec;
+        &.checked-all {
+            position: relative;
+        }
+    }
+</style>
diff --git a/src/components/checkbox.vue b/src/components/checkbox.vue
index 8782b73..b7eba9d 100644
--- a/src/components/checkbox.vue
+++ b/src/components/checkbox.vue
@@ -38,22 +38,22 @@
                     return this.table.isAll;
                 }
 
-                if (this.table.uniqueField) {
-                    return this.table.selectedIndex.includes(this.curRow[this.table.uniqueField]);
-                }
+                // if (this.table.uniqueField) {
+                //     return this.table.selectedIndex.includes(this.curRow[this.table.uniqueField]);
+                // }
 
-                return this.table.selectedIndex.includes(curRowIndex);
+                return this.table.selectedIndex.includes(this.curRowIndex);
             },
 
             handleChange (e) {
                 if (this.curRowIndex === -1) {
                     this.table.eventBus.$emit('row-select-all', this.val);
                 } else {
-                    let rowIndex = this.curRowIndex;
-                    if (this.table.uniqueField) {
-                        rowIndex = this.curRow[this.table.uniqueField];
-                    }
-                    this.table.eventBus.$emit('row-select', this.val, rowIndex);
+                    // let rowIndex = this.curRowIndex;
+                    // if (this.table.uniqueField) {
+                    //     rowIndex = this.curRow[this.table.uniqueField];
+                    // }
+                    this.table.eventBus.$emit('row-select', this.val, this.curRowIndex);
                 }
             }
         }
diff --git a/src/components/table-column.vue b/src/components/table-column.vue
index 621181f..2b6050a 100644
--- a/src/components/table-column.vue
+++ b/src/components/table-column.vue
@@ -10,7 +10,10 @@
         props: {
             label: String,
             prop: String,
-            width: [Number, String],
+            width: {
+                type: [Number, String],
+                default: 90
+            },
             type: String,
             sortable: {
                 type: Boolean,
diff --git a/src/components/table-header.vue b/src/components/table-header.vue
index acc771a..b4e59a1 100644
--- a/src/components/table-header.vue
+++ b/src/components/table-header.vue
@@ -55,10 +55,10 @@
 
             getColStyle (col) {
                 const style = {};
+                
+                style.width = !isNaN(parseInt(col.width)) ? '90px' : `${parseInt(col.width, 10)}px`;
+                style.height = !isNaN(parseInt(this.table.colHeight, 10)) ? '40px' : `${parseInt(this.table.colHeight, 10)}px`;
 
-                if (typeof col.width !== undefined && !isNaN(parseInt(col.width))) {
-                    style.width = `${parseInt(col.width, 10)}px`;
-                }
                 // style.textAlign = ['left', 'center', 'right'].indexOf(col.align) > -1 ? col.align : 'center';
                 
                 return style;
diff --git a/src/components/table.vue b/src/components/table.vue
index 26685d0..9ed1645 100644
--- a/src/components/table.vue
+++ b/src/components/table.vue
@@ -7,6 +7,12 @@
     ]" ref="table">
         <div class="v2-table__table-wrapper">
             <div class="v2-table__table-container" ref="container">
+                <!-- 解耦 checkbox 和 table 在DOM结构上的耦合-->
+                <checkboxList v-if="selectionColumn" 
+                    :column="selectionColumn" 
+                    :left="scrollLeft"
+                    :top="scrollTop">
+                </checkboxList>
                 <!-- header -->
                 <div class="v2-table__header-wrapper" ref="header" :style="{width: isContainerScroll ? contentWidth + 'px' : '100%'}">
                     <div :class="[
@@ -68,7 +74,7 @@
                 <div :class="[
                     'v2-table-fixed',
                     'v2-table__fixed-left'
-                ]" v-if="leftColumns.length > 0" :style="{width: leftContainerWidth + 'px'}">
+                ]" v-if="leftColumns.length > 0" :style="{width: leftContainerWidth + 'px', marginLeft: selectionColumn ? selectionColumn.width + 'px' : 0}">
                     <!-- header -->
                     <div class="v2-table-fixed__header-wrapper">
                         <div :class="[
@@ -242,6 +248,7 @@
     import TableRow from './table-row.vue';
     import EmptyIcon from './empty-icon.vue';
     import TableFooter from './table-footer.vue';
+    import CheckboxList from './checkbox-list.vue';
 
     export default {
         name: 'v2-table',
@@ -308,6 +315,11 @@
                 type: [Number, String],
                 default: 40
             },
+            // column header height
+            colHeight: {
+                type: [Number, String],
+                default: 40
+            },
 
             shownPagination: {
                 type: Boolean,
@@ -319,16 +331,16 @@
                 default: 'auto'
             },
 
-            updatedSelection: {
-                // whether updated selection row when data is changed.
-                type: Boolean,
-                default: false
-            },
+            // updatedSelection: {
+            //     // whether updated selection row when data is changed.
+            //     type: Boolean,
+            //     default: false
+            // },
 
-            uniqueField: {
-                type: String,
-                default: ''
-            },
+            // uniqueField: {
+            //     type: String,
+            //     default: ''
+            // },
 
             showSummary: {
                 type: Boolean,
@@ -363,6 +375,7 @@
                 columns: [],
                 leftColumns: [],
                 rightColumns: [],
+                selectionColumn: null,
 
                 // row select status
                 selectedIndex: [],
@@ -392,7 +405,8 @@
                 contentHeight: NaN,
                 bodyHeight: this.VOEWPORT_MIN_HEIGHT,
                 contentMarginTop: 0,
-                scrollTop: 0
+                scrollTop: 0,
+                scrollLeft: 0
             };
         },
 
@@ -442,10 +456,10 @@
                         this.rows = [].concat(val);
                     }
 
-                    if (this.updatedSelection && this.selectedIndex.length > 0) {
-                        this.emitSelectChange();
-                        return;
-                    } 
+                    // if (this.updatedSelection && this.selectedIndex.length > 0) {
+                    //     this.emitSelectChange();
+                    //     return;
+                    // } 
 
                     if (this.selectedIndex.length > 0) {
                         // reset selection status.
@@ -465,7 +479,9 @@
             },
 
             scrollTop (val) {
-                this.updateRenderRows();
+                if (this.isMetLazyLoad) {
+                    this.updateRenderRows();
+                }
             }
         },
 
@@ -590,7 +606,8 @@
                     this.$refs.footer.scrollLeft = ele.scrollLeft;
                 }
                 
-                this.isMetLazyLoad && (this.scrollTop = ele.scrollTop);
+                this.scrollTop = ele.scrollTop;
+                this.scrollLeft = ele.scrollLeft;
             },
 
             isValidNumber (number) {
@@ -628,20 +645,22 @@
             },
 
             emitSelectChange () {
-                let rows = [];
-                if (this.uniqueField) {
-                    this.selectedIndex.forEach(item => {
-                        const r = this.data.filter(d => d[this.uniqueField] === item);
-                        rows = [].concat(...rows, ...r);
-                    });
-                } else {
-                    // row-index
-                    this.selectedIndex.forEach(item => {
-                        rows.push(this.rows[item]);
-                    });
-                }
+                const rows = [];
+                // if (this.uniqueField) {
+                //     this.selectedIndex.forEach(item => {
+                //         const r = this.data.filter(d => d[this.uniqueField] === item);
+                //         rows = [].concat(...rows, ...r);
+                //     });
+                // } else {
+                    
+                // }
+                // row-index
+                this.selectedIndex.forEach(item => {
+                    rows.push(this.data[item]);
+                });
 
                 this.$emit('select-change', rows);
+                console.log('rrrr', rows);
             },
 
             handleRowSelect (isChecked, rowIndex) {
@@ -693,11 +712,15 @@
                 
                 for (let i = from; i < to; i++) {
                     if (typeof this.data[i] !== 'undefined') {
-                        list.push(this.data[i]);
+                        list.push(Object.assign({}, this.data[i], {
+                            __index: i
+                        }));
                     }
                 }
 
                 this.contentMarginTop = from * this.rh;
+                this.from = from;
+                this.to = to;
                 return list;
             }
         },
@@ -728,8 +751,9 @@
             const fixedRightColumnComponents = this.getColumnComponentsByType(columnComponents, 'right');
 
             this.columns = [].concat(selectionColumnComponents, fixedLeftColumnComponents, normalColumnComponents, fixedRightColumnComponents);
-            this.leftColumns = fixedLeftColumnComponents.length > 0 ? [].concat(selectionColumnComponents, fixedLeftColumnComponents) : [].concat(fixedLeftColumnComponents);
+            this.leftColumns = fixedLeftColumnComponents.length > 0 ? [].concat(fixedLeftColumnComponents) : [].concat(fixedLeftColumnComponents);
             this.rightColumns = [].concat(fixedRightColumnComponents);
+            this.selectionColumn = selectionColumnComponents.length > 0 ? selectionColumnComponents[0] : null;
 
             if (this.data.length && this.isMetLazyLoad) {
                 this.initRenderRows();
@@ -768,7 +792,8 @@
             TableRow,
             EmptyIcon,
             TableColGroup,
-            TableFooter
+            TableFooter,
+            CheckboxList
         },
 
         beforeDestroy () {