npm release 2.0.1 table 增加全选和排序功能

demo/alert/index.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+//    import vAlert from '../../src/components/alert';
     import vAlert from '../../src/components/alert';
     import vButton from '../../src/components/button';
 

demo/table/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <v-table :page-size="10" :has-all-select="true" :cols-num="5" :on-checkbox-click="table.checkboxClick" :data="table.data">
-            <v-table-columns :prop="'key'" :label="'索引'" :td-style="{width: '100px', color: 'red'}"></v-table-columns>
-            <v-table-columns :prop="'name'" :label="'姓名'" :render-header="renderHeader"></v-table-columns>
+        <v-table :page-size="10" :has-all-select="true" :cols-num="5" :on-checkbox-click="table.checkboxClick" :data="table.data" :has-select-all="true">
+            <v-table-columns :prop="'key'" :label="'索引'" :td-style="{width: '100px', color: 'red'}" :is-sort="true"></v-table-columns>
+            <v-table-columns :prop="'name'" :label="'姓名'" :render-header="renderHeader" :is-sort="true" :sort-fn="sortFn"></v-table-columns>
             <v-table-columns :prop="'age'" :label="'年龄'"></v-table-columns>
             <v-table-columns :prop="'address'" :label="'地址'"></v-table-columns>
             <v-table-columns inline-template :label="'操作1'">
@@ -54,6 +54,11 @@
             },
             clickX() {
                 console.log(arguments)
+            },
+            sortFn(data, sort) {
+                data.sort((a, b) => {
+                    return sort ? b.index - a.index : a.index - b.index;
+                })
             }
         }
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vucc",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "vue 前端组件库",
   "main": "dist",
   "devDependencies": {

src/components/select/index.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-    import {componentBaseParamConfig, alias} from '../base-config';
+    import {componentBaseParamConfig, alias, name2Alias} from '../base-config';
     import pvDropdown from '../dropdown';
     import pvInput from '../input';
 
@@ -101,6 +101,10 @@
             }
         },
 
+        created() {
+            name2Alias(this.data, this.asValue, this.asLabel);
+        },
+
         methods: {
             onSelected(index, item) {
                 let opts = this.data;
@@ -122,6 +126,7 @@
         watch: {
             // 数据变化重置初始值
             data() {
+                name2Alias(this.data, this.asValue, this.asLabel);
                 this.inputSelect = this.currentSelected;
             }
         },

src/components/table/body.jsx

@@ -1,13 +1,18 @@
+import pvCheckbox from '../checkbox'
+
 export default {
+    components: {
+        pvCheckbox
+    },
     render(h) {
         return (
-            <table>
+            <table class="vc-table-body-wrap">
                 <tbody>
                 {
                     this._l(this.dataShow, (row, index) => {
                         return <tr>
                             {
-                                this._l(this.body, (el) => {
+                                this._l(this.body, (el, ins) => {
                                     const getStyle = (el) => {
                                         const s = el.style;
                                         let res = [];
@@ -19,9 +24,20 @@ export default {
                                         return res.join('; ')
                                     };
 
-                                    return <td style={getStyle(el)}>
-                                        {row[el.key] !== void 0 ?  row[el.key] : el.renderCell.call(this._renderProxy, h, {row, el, index})}
-                                    </td>
+                                    if(ins === 0 && this.hasSelectAll) {
+                                        return <td style={getStyle(el)}>
+                                            <label on-click={($event) => this.handlerClick($event, row)}
+                                                   class="vc-label all-select-checkbox">
+                                                <span class="vc-checkbox"></span>
+                                                <span class="vc-label-text"> </span>
+                                            </label>
+                                            {row[el.key] !== void 0 ?  row[el.key] : el.renderCell.call(this._renderProxy, h, {row, el, index})}
+                                        </td>
+                                    } else {
+                                        return <td style={getStyle(el)}>
+                                            {row[el.key] !== void 0 ?  row[el.key] : el.renderCell.call(this._renderProxy, h, {row, el, index})}
+                                        </td>
+                                    }
                                 })
                             }
                         </tr>
@@ -45,7 +61,11 @@ export default {
             }
         },
         pageSize: Number,
-        currentPage: Number
+        currentPage: Number,
+        hasSelectAll: {
+            type: Boolean,
+            default: false
+        }
     },
 
     data() {
@@ -70,9 +90,20 @@ export default {
     },
 
     methods: {
-        calcDataShow() {
+        calcDataShow(sort, sortFn) {
             this.dataShow = [];
 
+            if(sort !== undefined) {
+                if(sortFn) {
+                    sortFn(this.data, sort);
+                } else {
+                    this.data.sort((a, b) => {
+                        if(sort) return a.index - b.index;
+                        else return b.index - a.index;
+                    })
+                }
+            }
+
             if (this.data && this.data.length > 0) {
                 let temp = this.isReal ? this.data : this.data.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage);
 
@@ -82,10 +113,41 @@ export default {
                     }, it))
                 });
             }
+        },
+        handlerClick($event, row) {
+            row.isChecked = !row.isChecked;
+
+            if(row.isChecked) {
+                $event.srcElement.parentElement.classList.add('vc-label-checked');
+            } else {
+                $event.srcElement.parentElement.classList.remove('vc-label-checked');
+
+                this.$parent.$emit('tableTdSelect', false);
+            }
         }
     },
 
     mounted() {
         this.calcDataShow();
+
+        this.$parent.$on('tableSort', (isUp, sortFn) => {
+            this.calcDataShow(isUp, sortFn);
+        });
+
+        this.$parent.$on('tableAllSelect', (val) => {
+            this.dataShow.forEach((it) => {
+                it.isChecked = val;
+            });
+
+            const checkbox = this.$el.querySelectorAll('.vc-table-body-wrap .all-select-checkbox') || [];
+
+            checkbox.forEach((it) => {
+                if(val) {
+                    it.classList.add('vc-label-checked');
+                } else {
+                    it.classList.remove('vc-label-checked');
+                }
+            });
+        });
     }
 }

src/components/table/columns.jsx

@@ -15,7 +15,9 @@ export default {
         data: Object,
         tdStyle: Object,
         renderHeader: Function,
-        renderTd: Function
+        renderTd: Function,
+        isSort: Boolean,
+        sortFn: Function
     },
 
     created() {
@@ -28,7 +30,6 @@ export default {
                     data._staticTrees = this._staticTrees;
                     data._m = this._m;
 
-                    debugger
                     return this.$options.render.call(data);
                 };
             }
@@ -41,7 +42,10 @@ export default {
             label: this.renderHeader ? this.renderHeader() : this.label,
             style: Object.assign({
                 width: (100 / parent.colsNum) + '%'
-            }, this.thStyle || this.tdStyle)
+            }, this.thStyle || this.tdStyle),
+            isSort: this.isSort,
+            isSortUp: this.isSort,
+            sortFn: this.sortFn
         });
 
         parent.body.push({

src/components/table/header.vue

@@ -2,19 +2,64 @@
     <table>
         <thead>
             <tr>
-                <th :style="it.style" v-for="it in header">{{it.label}}</th>
+                <th :style="it.style" :class="{pointer: it.isSort}" v-for="(it, index) in header" @click="sort(it)">
+                    <pv-checkbox @click.native.stop v-if="index === 0 && hasSelectAll" v-model="selectAll" :append-style="{float: 'left', 'margin-right': '5px'}"></pv-checkbox>
+                    <span v-if="it.isSort"
+                          :class="['vc-table-sort-arrow', {'vc-table-sort-arrow-down': !it.isSortUp}]"></span>
+                    <span :class="{'vc-table-label': hasSelectAll}">{{it.label}}</span>
+                </th>
             </tr>
         </thead>
     </table>
 </template>
 
 <script>
+    import pvCheckbox from '../checkbox'
+
     export default {
+        components: {
+            pvCheckbox
+        },
         props: {
             header: {
                 type: Array,
                 default: []
+            },
+            hasSelectAll: {
+                type: Boolean,
+                default: false
+            }
+        },
+
+        data() {
+            return {
+                selectAll: false
+            }
+        },
+
+        methods: {
+            sort(it) {
+                if(!it.isSort) return;
+
+                it.isSortUp = !it.isSortUp;
+                this.$parent.$emit('tableSort', it.isSortUp, it.sortFn);
             }
+        },
+
+        watch: {
+            selectAll(val) {
+                if(!this.isClickSelectAll && !this.selectAll) return;
+
+                this.isClickSelectAll = true;
+                this.$parent.$emit('tableAllSelect', val);
+            }
+        },
+
+        mounted() {
+            this.$parent.$on('tableTdSelect', () => {
+                this.isClickSelectAll = false;
+                this.selectAll = false;
+            });
         }
     }
 </script>

src/components/table/index.vue

@@ -58,8 +58,8 @@
                 <slot></slot>
             </div>
             <div class="vc-table-body">
-                <pv-table-header :header="header" :body="body"></pv-table-header>
-                <pv-table-body :body="body" :data="data" :page-size="pageSizeShow"
+                <pv-table-header :header="header" :body="body" :has-select-all="hasSelectAll"></pv-table-header>
+                <pv-table-body :body="body" :data="data" :page-size="pageSizeShow" :has-select-all="hasSelectAll"
                                :current-page="currentPageShow"></pv-table-body>
             </div>
         </div>
@@ -122,7 +122,11 @@
                     return []
                 }
             },
-            colsNum: Number
+            colsNum: Number,
+            hasSelectAll: {
+                type: Boolean,
+                default: false
+            }
         }),
 
         data() {
@@ -148,6 +152,10 @@
         },
 
         mounted() {
+            this.data.forEach((it, index) => {
+                it.index = index;
+            });
+
             this.colsHidden = false;
         }
     }

src/components/table/style.scss

@@ -1,4 +1,5 @@
 @import "../../style/ver";
+@import "../../style/mixins";
 @import "../../style/compatibility";
 
 $table-prefix-cls: $css-prefix + "table";
@@ -12,6 +13,37 @@ $table-head-background-color: lighten($base-bg, 3%);
   color: $base-color;
   line-height: 2;
 
+  .pointer {
+    cursor: pointer;
+  }
+
+  &-label {
+    position: absolute;
+    top: 52%;
+    transform: translateY(-50%);
+  }
+
+  &-sort-arrow {
+    @include iconfont-mixin();
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    line-height: 1;
+    margin-top: -5px;
+    color: $gray-color;
+    @include iconfont-size-under-12px(8px);
+
+     &:before {
+       content: '\E611';
+       display: block;
+       font-family: "vcicon" !important;
+     }
+  }
+
+  &-sort-arrow-down {
+    @include iconfont-size-under-12px(8px, 180deg);
+  }
+
   &-body {
     transition: opacity 0.3s ease;
   }