st-comp 0.0.48 → 0.0.49

package/src/pages/VirtualTable/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div style="width: 100%; height: 100%; display: flex">
+    <div style="width: 300px; height: 100%">
+      <st-virtualTable
+        :data="tableData"
+        :columns="tableColumns"
+        :config="{
+          activeRowNum: 9,
+          activeRowKey: 'id',
+        }"
+        v-model:activeData="activeData"
+        @scrollCallBack="scrollCallBack"
+      />
+    </div>
+    <div style="flex: 1; margin-left: 10px; padding-left: 10px; border-left: 1px solid silver">
+      <div
+        style="
+          background-color: tomato;
+          width: 100%;
+          height: 100%;
+          font-size: 20px;
+          font-weight: bold;
+          overflow-y: scroll;
+          padding: 10px;
+          box-sizing: border-box;
+        "
+      >
+        <p v-for="(item, index) in activeData">{{ item.id }} - {{ item.featureName }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, watch } from "vue";
+import demo from "./demo.json";
+
+const tableData = ref(demo);
+const tableColumns = ref([
+  {
+    key: "id",
+    title: "ID",
+    dataKey: "id",
+    width: 120,
+    fixed: true,
+    cellRenderer: ({ rowData }) => {
+      const { id } = rowData;
+      return <div>{id}</div>;
+    },
+  },
+  {
+    key: "code",
+    title: "品种",
+    dataKey: "code",
+    width: 120,
+    cellRenderer: ({ rowData }) => {
+      const { featureName } = rowData;
+      return (
+        <div class="overflowText" title={`${featureName}`}>
+          {featureName}
+        </div>
+      );
+    },
+  },
+  {
+    key: "exchangeName",
+    title: "类型",
+    dataKey: "exchangeName",
+    width: 120,
+    cellRenderer: ({ rowData }) => {
+      const { exchangeName } = rowData;
+      return <div>{exchangeName}</div>;
+    },
+  },
+]);
+const activeData = ref([]);
+const scrollCallBack = (params) => {
+  const { yAxisScrollDir, isTouchBottom } = params;
+  if (yAxisScrollDir === "forward" && isTouchBottom) {
+    ElMessage.warning("触底了");
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/router/routes.ts

@@ -55,8 +55,13 @@ export default [
     component: () => import('../pages/TreeMap/index.vue'),
   },
   {
-    path: '/varSeach',
-    name: 'VarSeach',
-    component: () => import('../pages/VarSeach/index.vue'),
+    path: '/varietySearch',
+    name: 'VarietySearch',
+    component: () => import('../pages/VarietySearch/index.vue'),
+  },
+  {
+    path: '/virtualTable',
+    name: 'VirtualTable',
+    component: () => import('../pages/VirtualTable/index.vue'),
   },
 ]