stk-table-vue 0.4.8 → 0.4.9

package/lib/stk-table-vue.js

@@ -1122,17 +1122,18 @@ const _hoisted_6 = [
 ];
 const _hoisted_7 = ["onMousedown"];
 const _hoisted_8 = ["onMousedown"];
-const _hoisted_9 = {
+const _hoisted_9 = { class: "stk-tbody-main" };
+const _hoisted_10 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_10 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
-const _hoisted_11 = {
+const _hoisted_11 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
+const _hoisted_12 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_12 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_13 = ["title"];
+const _hoisted_13 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_14 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1468,9 +1469,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const sortConfig = props.sortConfig;
       const defaultSort = sortConfig.defaultSort;
       if (!order && defaultSort) {
-        order = defaultSort.order;
+        if (!defaultSort.dataIndex) {
+          console.error("sortConfig.defaultSort.dataIndex is required");
+          return;
+        }
+        order = defaultSort.order || "desc";
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
         sortCol.value = defaultSort.dataIndex;
+        const c = props.columns.find((item) => item.dataIndex === defaultSort.dataIndex);
+        if (c) {
+          col = c;
+        } else {
+          console.error("defaultSort.dataIndex not found in columns");
+          col = props.columns[0];
+        }
+        if (!col)
+          return;
       }
       if (!props.sortRemote || options.force) {
         dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
@@ -1668,6 +1682,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["stk-table", {
           virtual: _ctx.virtual,
           "virtual-x": _ctx.virtualX,
+          "vt-on": unref(virtual_on),
           dark: _ctx.theme === "dark",
           headless: _ctx.headless,
           "is-col-resizing": unref(isColResizing),
@@ -1783,15 +1798,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ], 32);
             }), 128))
           ], 512)) : createCommentVNode("", true),
-          createElementVNode("tbody", {
-            class: normalizeClass(["stk-tbody-main", unref(virtual_on) ? "vt-on" : "vt-off"])
-          }, [
+          createElementVNode("tbody", _hoisted_9, [
             unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
               key: 0,
               style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
               class: "padding-top-tr"
             }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_9)) : createCommentVNode("", true),
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
@@ -1814,7 +1827,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onContextmenu: (e) => onRowMenu(e, row),
                 onMouseover: (e) => onTrMouseOver(e, row)
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_11)) : createCommentVNode("", true),
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
@@ -1843,16 +1856,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                         createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                       ], 64))
-                    ], 8, _hoisted_13))
-                  ], 46, _hoisted_12);
+                    ], 8, _hoisted_14))
+                  ], 46, _hoisted_13);
                 }), 128))
-              ], 42, _hoisted_10);
+              ], 42, _hoisted_11);
             }), 128)),
             unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
               key: 1,
               style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
             }, null, 4)) : createCommentVNode("", true)
-          ], 2)
+          ])
         ], 6),
         (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
           key: 1,

package/lib/style.css

@@ -91,16 +91,22 @@
 .stk-table.border-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
-.stk-table.stripe .stk-tbody-main.vt-on tr:nth-child(odd){
+.stk-table.stripe .stk-tbody-main tr:nth-child(even){
   background-color:var(--stripe-bgc);
 }
-.stk-table.stripe .stk-tbody-main.vt-off tr:nth-child(even){
+.stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
-.stk-table.row-hover tbody tr:hover{
+.stk-table.stripe.row-hover .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
-.stk-table.row-active tbody tr.active{
+.stk-table.stripe.row-active .stk-tbody-main tr.active{
+  background-color:var(--tr-active-bgc);
+}
+.stk-table.row-hover .stk-tbody-main tr:hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table.row-active .stk-tbody-main tr.active{
   background-color:var(--tr-active-bgc);
 }
 .stk-table.cell-hover tbody td:hover{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.4.8",
+    "version": "0.4.9",
     "description": "Simple realtime virtual table for vue3 and vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -6,6 +6,7 @@
         :class="{
             virtual,
             'virtual-x': virtualX,
+            'vt-on': virtual_on,
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
@@ -121,7 +122,7 @@
             <!-- 用于虚拟滚动表格内容定位 @deprecated 有兼容问题-->
             <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
             <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
-            <tbody class="stk-tbody-main" :class="virtual_on ? 'vt-on' : 'vt-off'">
+            <tbody class="stk-tbody-main">
                 <tr v-if="virtual_on" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
@@ -855,10 +856,22 @@ function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?:
     const defaultSort = sortConfig.defaultSort;
 
     if (!order && defaultSort) {
+        if (!defaultSort.dataIndex) {
+            console.error('sortConfig.defaultSort.dataIndex is required');
+            return;
+        }
         // 没有排序时变成默认排序
-        order = defaultSort.order;
+        order = defaultSort.order || 'desc';
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
         sortCol.value = defaultSort.dataIndex as string;
+        const c = props.columns.find(item => item.dataIndex === defaultSort.dataIndex);
+        if (c) {
+            col = c;
+        } else {
+            console.error('defaultSort.dataIndex not found in columns');
+            col = props.columns[0];
+        }
+        if (!col) return;
     }
     if (!props.sortRemote || options.force) {
         dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);

package/src/StkTable/style.less

@@ -134,23 +134,31 @@
     }
 
     /* 斑马纹*/
-    &.stripe .stk-tbody-main {
-
-        &.vt-on tr:nth-child(odd) {
+    &.stripe {
+        .stk-tbody-main tr:nth-child(even) {
             background-color: var(--stripe-bgc);
         }
 
-        &.vt-off tr:nth-child(even) {
+        &.vt-on .stk-tbody-main tr:nth-child(odd) {
             background-color: var(--stripe-bgc);
         }
+
+        &.row-hover .stk-tbody-main tr:hover {
+            background-color: var(--tr-hover-bgc);
+        }
+
+        &.row-active .stk-tbody-main tr.active {
+            background-color: var(--tr-active-bgc);
+        }
     }
 
-    &.row-hover tbody tr:hover {
+
+    &.row-hover .stk-tbody-main tr:hover {
         background-color: var(--tr-hover-bgc);
     }
 
 
-    &.row-active tbody tr.active {
+    &.row-active .stk-tbody-main tr.active {
         background-color: var(--tr-active-bgc);
     }