modify(dataTable)

src/DataTable/src/BaseTable.vue

@@ -9,7 +9,7 @@
       :fixed="fixed"
       :scroll-x="scrollX"
       @scroll="handleHeaderScroll"
-      @set-active="setActive"
+      @set-active-fixed-column="setActiveFixedColumn"
     />
     <table-body
       ref="body"
@@ -106,9 +106,9 @@ export default {
     handleHeaderScroll (...args) {
       this.$emit('header-scroll', ...args)
     },
-    setActive (activeLeft, activeRight) {
-      this.$refs.body.activeLeft = activeLeft
-      this.$refs.body.activeRight = activeRight
+    setActiveFixedColumn (leftActiveFixedColumn, rightActiveFixedColumn) {
+      this.$refs.body.activeLeft = leftActiveFixedColumn
+      this.$refs.body.activeRight = rightActiveFixedColumn
     }
   }
 }

src/DataTable/src/DataTable.vue

@@ -208,7 +208,6 @@ export default {
   },
   computed: {
     styleScrollX () {
-      console.log('formatLength(this.scrollX)', formatLength(this.scrollX))
       return formatLength(this.scrollX)
     },
     currentFixedColumnLeft () {

src/DataTable/src/TableParts/Header.vue

@@ -41,8 +41,8 @@
                 'n-data-table-th--sortable': isColumnSortable(column),
                 'n-data-table-th--ellipsis': column.ellipsis,
                 [`n-data-table-th--fixed-${column.fixed}`]: column.fixed,
-                'n-data-table-th--shadow-after': activeLeft[column.key],
-                'n-data-table-th--shadow-before': activeRight[column.key]
+                'n-data-table-th--shadow-after': leftActiveFixedColumn[column.key],
+                'n-data-table-th--shadow-before': rightActiveFixedColumn[column.key]
               }"
               @click="handleHeaderClick($event, column)"
             >
@@ -155,8 +155,8 @@ export default {
   },
   data: function () {
     return {
-      activeLeft: [],
-      activeRight: []
+      leftActiveFixedColumn: [],
+      rightActiveFixedColumn: []
     }
   },
   computed: {
@@ -211,7 +211,7 @@ export default {
   mounted () {
     this.setActiveRight(this.$refs.body)
     this.setActiveLeft(this.$refs.body)
-    this.$emit('set-active', this.activeLeft, this.activeRight)
+    this.$emit('set-active-fixed-column', this.leftActiveFixedColumn, this.rightActiveFixedColumn)
   },
   methods: {
     isColumnSortable,
@@ -220,7 +220,7 @@ export default {
     handleScroll (e) {
       this.setActiveRight(e.target)
       this.setActiveLeft(e.target)
-      this.$emit('set-active', this.activeLeft, this.activeRight)
+      this.$emit('set-active-fixed-column', this.leftActiveFixedColumn, this.rightActiveFixedColumn)
       this.$emit('scroll', e)
     },
     handleCheckboxInput (column) {
@@ -246,9 +246,9 @@ export default {
       const tableWidth = this.$refs.table.offsetWidth
       const scrollWidth = target.scrollWidth
       for (let i = 0; i < rightFixedColumns.length; i++) {
-        this.activeRight = {}
+        this.rightActiveFixedColumn = {}
         if (scrollLeft + this.fixedColumnsRight[rightFixedColumns[i].key] + tableWidth < scrollWidth) {
-          this.activeRight[rightFixedColumns[i].key] = true
+          this.rightActiveFixedColumn[rightFixedColumns[i].key] = true
           break
         }
       }
@@ -259,12 +259,12 @@ export default {
       let leftWidth = 0
       for (let i = 0; i < leftFixedColumns.length; i++) {
         if (scrollLeft > this.fixedColumnsLeft[leftFixedColumns[i].key] - leftWidth) {
-          this.activeLeft = {}
-          this.activeLeft[leftFixedColumns[i].key] = true
+          this.leftActiveFixedColumn = {}
+          this.leftActiveFixedColumn[leftFixedColumns[i].key] = true
           leftWidth = leftWidth + leftFixedColumns[i].width
           continue
         } else if (i === 0) {
-          this.activeLeft = {}
+          this.leftActiveFixedColumn = {}
         } else {
           break
         }

styles/themes/dark/components/DataTable.scss

@@ -1,3 +1,5 @@
+@import '../../../utils/color.scss';
+
 @mixin setup-dark-data-table {
   $--data-table-border-color: $--n-divider-color !global;
   $--data-table-header-text-color: $--n-primary-text-color !global;
@@ -20,13 +22,3 @@
     'active': $--n-primary-color
   ) !global;
 }
-@function mix-color-with-alpha-color ($color, $alpha-color) {
-  $alpha-color-weight: percentage(alpha($alpha-color));
-  $temp-color-1: scale-color($color, $lightness: -$alpha-color-weight);
-  $temp-color-2: scale-color($alpha-color, $lightness: -(100% - $alpha-color-weight));
-  @return rgb(
-    red($temp-color-1) + red($temp-color-2),
-    green($temp-color-1) + green($temp-color-2),
-    blue($temp-color-1) + blue($temp-color-2)
-  );
-}

styles/themes/light/components/DataTable.scss

@@ -1,3 +1,5 @@
+@import '../../../utils/color.scss';
+
 @mixin setup-light-data-table {
   $--data-table-border-color: $--n-divider-color !global;
   $--data-table-header-text-color: $--n-primary-text-color !global;
@@ -20,14 +22,3 @@
     'active': $--n-primary-color
   ) !global;
 }
-
-@function mix-color-with-alpha-color ($color, $alpha-color) {
-  $alpha-color-weight: percentage(alpha($alpha-color));
-  $temp-color-1: scale-color($color, $lightness: -$alpha-color-weight);
-  $temp-color-2: scale-color($alpha-color, $lightness: -(100% - $alpha-color-weight));
-  @return rgb(
-    red($temp-color-1) + red($temp-color-2),
-    green($temp-color-1) + green($temp-color-2),
-    blue($temp-color-1) + blue($temp-color-2)
-  );
-}

styles/utils/color.scss

@@ -0,0 +1,10 @@
+@function mix-color-with-alpha-color ($color, $alpha-color) {
+  $alpha-color-weight: percentage(alpha($alpha-color));
+  $temp-color-1: scale-color($color, $lightness: -$alpha-color-weight);
+  $temp-color-2: scale-color($alpha-color, $lightness: -(100% - $alpha-color-weight));
+  @return rgb(
+    red($temp-color-1) + red($temp-color-2),
+    green($temp-color-1) + green($temp-color-2),
+    blue($temp-color-1) + blue($temp-color-2)
+  );
+}