fix: advance table overflow scroll

demo/components/advanceTableDemo.vue

@@ -665,7 +665,7 @@ export default {
     d = d.map((item, idx) => {
       return {
         name: 'xiaobai' + idx + '218212198379821739821',
-        age: 10 + Math.ceil(Math.random() * 10)
+        age: '1'
       }
     })
     console.log(d)
@@ -700,6 +700,20 @@ export default {
           }],
           onFilter: 'custom'
         },
+        {
+          title: '#',
+          render: (h, params) => {
+            return (
+              <n-button
+                style="margin:0;"
+                size="small"
+                onClick={() => this.handleClick(params)}
+              >
+                delete
+              </n-button>
+            )
+          }
+        },
         {
           title: 'Age',
           key: 'age',
@@ -747,6 +761,20 @@ export default {
           key: 'name',
           width: 300
         },
+        {
+          title: '#',
+          render: (h, params) => {
+            return (
+              <n-button
+                style="margin:0;"
+                size="small"
+                onClick={() => this.handleClick(params)}
+              >
+                delete
+              </n-button>
+            )
+          }
+        },
         {
           title: 'Age',
           key: 'age',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/AdvanceTable/src/main.vue

@@ -16,6 +16,7 @@
       </div>
     </div>
     <n-table
+      ref="header"
       style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;"
       :style="colGroup"
     >
@@ -23,8 +24,7 @@
         <col
           v-for="(column, i) in columns"
           :key="i"
-          :style="computeCustomWidthStl(column) || headColStl"
+          :style="computeCustomWidthStl(column)"
-          :width="column.width || headColWidth"
         >
         <col
           v-if="scrollBarWidth"
@@ -77,13 +77,13 @@
       ref="tbody"
       :style="tableStl"
       style="border-top-left-radius:0;border-top-right-radius:0;"
+      @scroll.native="onBodyScrolll"
     >
       <colgroup>
         <col
           v-for="(column, i) in columns"
           :key="i"
-          :style="computeCustomWidthStl(column) || colStl"
+          :style="computeCustomWidthStl(column)"
-          :width="column.width || colWidth"
         >
       </colgroup>
       <n-tbody>
@@ -265,27 +265,29 @@ export default {
     colGroup () {
       return { width: `100%` }
     },
-    headColStl () {
+    // headColStl () {
-      let width = (
+    //   let width = (
-        (this.wrapperWidth - this.scrollBarWidth) /
+    //     (this.wrapperWidth - this.scrollBarWidth) /
-        this.columns.length
+    //     this.columns.length
-      ).toFixed(3)
+    //   ).toFixed(3)
-      return {
+    //   return ''
-        width: width + 'px',
+    //   return {
-        'padding-right': this.scrollBarWidth + 'px',
+    //     width: width + 'px',
-        minWidth: width + 'px'
+    //     'padding-right': this.scrollBarWidth + 'px',
-      }
+    //     minWidth: width + 'px'
-    },
+    //   }
-    colStl () {
+    // },
-      let width = (
+    // colStl () {
-        (this.wrapperWidth - this.scrollBarWidth) /
+    //   return ''
-        this.columns.length
+    //   let width = (
-      ).toFixed(3)
+    //     (this.wrapperWidth - this.scrollBarWidth) /
-      return {
+    //     this.columns.length
-        width: width + 'px',
+    //   ).toFixed(3)
-        minWidth: width + 'px'
+    //   return {
-      }
+    //     width: width + 'px',
-    },
+    //     minWidth: width + 'px'
+    //   }
+    // },
     headColWidth () {
       return (
         (this.wrapperWidth - this.scrollBarWidth) /
@@ -334,12 +336,16 @@ export default {
     console.log(this.wrapperWidth, this.tbodyWidth)
 
     this.init()
-    window.addEventListener('resize', this.init)
+    // window.addEventListener('resize', this.init)
   },
   beforeDestroy () {
-    window.removeEventListener('resize', this.init)
+    // window.removeEventListener('resize', this.init)
   },
   methods: {
+    onBodyScrolll (event) {
+      this.$refs.header.$el.scrollLeft = event.target.scrollLeft
+      event.stopPropagation()
+    },
     computeCustomWidthStl (column) {
       if (column.width) {
         let width = column.width