merge package.json

demo/debugComponents/scrollbarDebug/scaffold.demo.vue

@@ -38,6 +38,16 @@
           </div>
         </n-scrollbar>
       </div>
+      <div style="width: 400px;">
+        <n-scrollbar>
+          <n-advance-table
+            :columns="columns"
+            :data="data"
+            max-height="300px"
+            :on-change="onChange"
+          />
+        </n-scrollbar>
+      </div>
       <!--EXAMPLE_END-->
     </div>
     <pre class="n-doc-section__inspect">Inspect some value here</pre>
@@ -50,8 +60,82 @@
 <script>
 export default {
   data () {
+    let d = new Array(20).fill(0)
+    d = d.map((item, idx) => {
+      return {
+        name: 'xiaobai' + idx,
+        age: 10 + Math.ceil(Math.random() * 10)
+      }
+    })
+    console.log(d)
     return {
+      columns: [
+        {
+          title: 'Name',
+          key: 'name',
+          filterMultiple: false,
+          filterItems: [{
+            label: 'xiaobai1',
+            value: 'xiaobai1'
+          }],
+          onFilter: 'custom'
+        },
+        {
+          title: 'Age',
+          key: 'age',
+          sortable: true,
+          order: 1, // 默认升序
+          sorter: (a, b) => {
+            // soter 方法替换默认的sorter函数
+            return a.age - b.age
+          },
+          filterMultiple: true, // 多选 onFilter接受参数为数组
+          filterItems: [{
+            label: '14',
+            value: 14
+          }, {
+            label: '15',
+            value: 15
+          }],
+          onFilter: (value, record) => {
+            return value.includes(record.age)
+            // switch (value) {
+            //   case 14:
+            //     return record.age <= value
+            //   case 15:
+            //     return record.age >= value
+            // }
+          },
+          render: (h, params) => {
+            return <b>{params.row.age}</b>
+          }
+        },
+        {
+          title: '#',
+          render: (h, params) => {
+            return (
+              <n-button
+                style="margin:0;"
+                size="small"
+                onClick={() => this.handleClick(params)}
+              >
+                delete
+              </n-button>
+            )
+          }
+        }
+      ],
+      data: d
     }
+  },
+  methods: {
+    handleClick (params) {
+      alert('delete' + JSON.stringify(params))
+    },
+    onChange (...args) {
+      console.log(args)
+    }
+
   }
 }
 </script>

package.json

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

styles/Scrollbar.scss

@@ -52,11 +52,11 @@
 }
 
 .n-scrollbar-content {
-  width: max-content;
+  width: fit-content;
   overflow: visible;
   min-width: 100%;
-  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  /* stylelint-disable */
-  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -moz-fit-content;    /* Firefox/Gecko */
-  width: -webkit-max-content; /* Chrome */
+  width: -webkit-fit-content; /* Chrome */
-  width: max-content;
+  /* stylelint-enable */
 }