fixed(advanced-table): table-shadow styles

demo/documentation/components/advancedTable/enUS/seniorUsage.md

@@ -166,7 +166,7 @@ export default {
     getData(args) {
       this.loading = true
       setTimeout(() => {
-        let d = new Array(0).fill(0)
+        let d = new Array(20).fill(0)
         d = d.map((item, idx) => {
           return {
             name: 'xiaobai213213132123213111121' + idx,

packages/common/AdvanceTable/popFilter/index.vue

@@ -2,7 +2,6 @@
   <div class="n-filter-wraper">
     <n-popselect
       v-if="!loading && !error"
-
       v-model="selectedValue"
       cancelable
       :multiple="column.filterMultiple"
@@ -13,25 +12,14 @@
         <filterIcon :status="filterStatus" />
       </template>
     </n-popselect>
-    <n-popover
+    <n-popover v-else placement="bottom" trigger="click">
-      v-else
-      placement="bottom"
-      trigger="click"
-    >
       <template v-slot:activator>
         <filterIcon :status="filterStatus" />
       </template>
-      <p
+      <p v-if="loading" class="n-filter-tip-line">
-        v-if="loading"
-        class="n-filter-tip-line"
-      >
         Loading...
       </p>
-      <p
+      <p v-if="error" class="n-filter-tip-line" style="">
-        v-if="error"
-        class="n-filter-tip-line"
-        style=""
-      >
         Error,refresh
         <n-icon
           style="cursor:pointer"
@@ -39,7 +27,9 @@
           color="#999"
           size="18"
           @click.stop="initItems"
-        />
+        >
+          <md-refresh />
+        </n-icon>
       </p>
     </n-popover>
   </div>
@@ -47,10 +37,12 @@
 
 <script>
 import filterIcon from '../filterIcon'
+import mdRefresh from 'naive-ui/lib/icons/md-refresh'
 
 export default {
   components: {
-    filterIcon
+    filterIcon,
+    mdRefresh
   },
   props: {
     value: {
@@ -79,7 +71,11 @@ export default {
   },
   computed: {
     filterStatus () {
-      return this.selectedValue !== null && this.selectedValue !== undefined && this.selectedValue.length !== 0
+      return (
+        this.selectedValue !== null &&
+        this.selectedValue !== undefined &&
+        this.selectedValue.length !== 0
+      )
     }
   },
   watch: {
@@ -100,15 +96,18 @@ export default {
       this.error = false
       if (typeof this.items === 'function') {
         this.loading = true
-        this.items().then((items) => {
+        this.items().then(
-          this.filterItems = items
+          items => {
-          this.loading = false
+            this.filterItems = items
-        }, (err) => {
+            this.loading = false
-          console.error(err)
+          },
-          this.error = true
+          err => {
-          this.loading = false
+            console.error(err)
-          throw err
+            this.error = true
-        })
+            this.loading = false
+            throw err
+          }
+        )
       } else {
         this.filterItems = this.items
       }
@@ -125,8 +124,8 @@ export default {
 .n-filter-wraper {
   display: inline-block;
 }
-.n-filter-tip-line{
+.n-filter-tip-line {
-  text-align:center;
+  text-align: center;
-  padding:5px;
+  padding: 5px;
 }
 </style>

styles/AdvancedTable.scss

@@ -29,7 +29,7 @@
       transition: box-shadow 0.2s;
       &.n-advance-table__fixed--right {
         box-shadow: -10px 0 16px -5px rgba(0, 0, 0, 0.2);
-        border-right: none;
+        border-left: none;
       }
       &.n-advance-table__fixed--left {
         box-shadow: 10px 0 16px -5px rgba(0, 0, 0, 0.2);
@@ -49,7 +49,7 @@
     .n-advance-table__fixed--right {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      border-left: $--table-td-border-right;
+      // border-left: $--table-td-border-right;
 
       right: 0;
       top: 0;
@@ -61,7 +61,7 @@
       display: inline-block;
       position: absolute;
       z-index: 100;
-
+      overflow: hidden;
       // box-shadow: 10px 0 16px 3px rgba(0, 0, 0, 0.2);
       .n-table.n-advance-table__body {
         width: auto;
@@ -125,7 +125,7 @@
       position: absolute;
       width: 100%;
       top: 0;
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: $--table-loading-background;
       z-index: 200;
     }
     @include once {

styles/themes/dark/components/AdvanceTable.scss

@@ -1,4 +1,5 @@
 @mixin setup-dark-advance-table {
   $--table-header-icon-color: $--primary-6 !global;
   $--table-scrollbar-color: rgba(255, 255, 255, 0.2) !global;
-}
+  $--table-loading-background: rgba(0, 0, 0, 0.15) !global;
+}

styles/themes/light/components/AdvanceTable.scss

@@ -1,4 +1,5 @@
 @mixin setup-light-advance-table {
   $--table-header-icon-color: $--primary-6 !global;
   $--table-scrollbar-color: #ababab !global;
-}
+  $--table-loading-background: rgba(255, 255, 255, 0.5) !global;
+}