Poptip add prop `popper-class`, Table update

梁灏
1 parent f13df74f
Showing 5 changed files with 32 additions and 88 deletions Show diff stats
examples/routers/table.vue
src/components/poptip/poptip.vue
src/components/table/cell.vue
src/components/table/table-head.vue
src/styles/components/table.less
 <template>
     <div>
-        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
-        <Button @click="handleSetData">Set Data</Button>
-        <Button @click="handleClearData">Clear Data</Button>
-        <Button @click="handleSelectAll(true)">Set all selected</Button>
-        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
-        <div style="margin:20px 0px;">
-            <Table :data="tableData1" :columns="tableColumns1"  style="width: 100%;" stripe></Table>
-            <div style="margin: 10px;overflow: hidden">
-                <div style="float: right;">
-                    <Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
-                </div>
-            </div>
-        </div>
+        <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
+        <Button @click="handleClearCurrentRow">Clear</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                columns4: [
+                columns3: [
                     {
-                        type: 'selection',
+                        type: 'index',
                         width: 60,
                         align: 'center'
                     },
@@ -39,47 +28,6 @@
                     }
                 ],
                 data1: [
-
-                ],
-                
-                tableData1: [],
-                tableColumns1: [
-                    {
-                        title: 'Data1',
-                        key: 'data1'
-                    },
-                    {
-                        title: 'Data2',
-                        key: 'data2'
-                    },
-                    {
-                        title: 'Data3',
-                        key: 'data3'
-                    },
-                    {
-                        title: 'Data4',
-                        key: 'data4'
-                    },
-                    {
-                        title: 'Data5',
-                        key: 'data5'
-                    },
-                    {
-                        title: 'Data6',
-                        key: 'data6'
-                    },
-                ]
-            }
-        },
-        mounted(){
-            this.refreshData();
-        },
-        methods: {
-            handleSelectAll (status) {
-                this.$refs.selection.selectAll(status);
-            },
-            handleSetData () {
-                this.data1 = [
                     {
                         name: 'John Brown',
                         age: 18,
@@ -104,27 +52,12 @@
                         address: 'Ottawa No. 2 Lake Park',
                         date: '2016-10-04'
                     }
-                ];
-            },
-            handleClearData () {
-                this.data1 = [];
-            },
-            refreshData(){
-                let data = [];
-                for (let i = 0; i < 10; i++) {
-                    data.push({
-                        data1: Math.floor(Math.random () * 10000),
-                        data2: Math.floor(Math.random () * 1000000),
-                        data3: Math.floor(Math.random () * 100000000),
-                        data4: Math.floor(Math.random () * Math.random () * 10000),
-                        data5: Math.floor(Math.random () * Math.random () * 1000000),
-                        data6: Math.floor(Math.random () * Math.random () * 100000000),
-                    });
-                }
-                this.tableData1 = data;
-            },
-            changePage(){
-                this.refreshData();
+                ]
+            }
+        },
+        methods: {
+            handleClearCurrentRow () {
+                this.$refs.currentRowTable.clearCurrentRow();
             }
         }
     }
@@ -97,6 +97,9 @@
             transfer: {
                 type: Boolean,
                 default: false
+            },
+            popperClass: {
+                type: String
             }
         },
         data () {
@@ -120,7 +123,8 @@
                 return [
                     `${prefixCls}-popper`,
                     {
-                        [`${prefixCls}-confirm`]: this.transfer && this.confirm
+                        [`${prefixCls}-confirm`]: this.transfer && this.confirm,
+                        [`${this.popperClass}`]: !!this.popperClass
                     }
                 ];
             },
 <template>
     <div :class="classes" ref="cell">
-        <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
+        <template v-if="renderType === 'index'"><span>{{naturalIndex + 1}}</span></template>
         <template v-if="renderType === 'selection'">
             <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
@@ -23,6 +23,8 @@
                                 v-if="isPopperShow(column)"
                                 v-model="column._filterVisible"
                                 placement="bottom"
+                                popper-class="ivu-table-popper"
+                                transfer
                                 @on-popper-hide="handleFilterHide(column._index)">
                                 <span :class="[prefixCls + '-filter']">
                                     <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
@@ -345,15 +345,13 @@
         &-footer{
             padding: 4px;
             border-top: 1px solid @border-color-split;
-        }
-    }
-    .ivu-poptip-popper{
-        min-width: 0;
-        text-align: left;
-    }
-    thead .ivu-poptip-popper{
-        .ivu-poptip-body{
-            padding: 0;
+            overflow: hidden;
+            button:first-child{
+                float: left;
+            }
+            button:last-child{
+                float: right;
+            }
         }
     }
  
@@ -371,3 +369,10 @@
         visibility: hidden;
     }
 }
+.ivu-table-popper{
+    min-width: 0;
+    text-align: left;
+    .ivu-poptip-body{
+        padding: 0;
+    }
+}
 \ No newline at end of file