Sun Nov 19 15:35:00 CST 2023 inscode

2e3b8ef2 · chyuanrufeng · 7a093d7e · 2e3b8ef2 · 2e3b8ef2 · 2e3b8ef2
9 changed file
--- a/.inscode
+++ b/.inscode
 run = "npm i && npm run dev"
+language = "node"
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+[debugger]
+program = "main.js"
--- a/package.json
+++ b/package.json
@@ -7,8 +7,10 @@
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
+    "element-plus": "^2.4.2",
    "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",

--- a/src/App.vue
+++ b/src/App.vue
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
 </script>
 <template>
-  <header>
+<RouterLink to="/">Home</RouterLink>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+<RouterLink to="/tablemerge">tablemerge合并单元格</RouterLink>
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-  <main>
-    <TheWelcome />
-  </main>
 </template>
 <style scoped>
-header {
-  line-height: 1.5;
-}
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
 </style>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -10,11 +10,6 @@ defineProps({
 <template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
  </div>
 </template>

--- a/src/components/TableMerge.vue
+++ b/src/components/TableMerge.vue
+<!--
+ * @Description: 实现表格的合并 
+-->
+<template>
+  <h2>实现表格的合并</h2>
+  <div>
+    <!--  :span-method="arraySpanMethod" -->
+    <el-button type="primary" @click="testf">合并 </el-button>
+    <el-table
+      :data="tableData"
+      border
+      :span-method="arraySpanMethod"
+      style="width: 100%"
+      @cell-click="cellClick"
+    >
+      <el-table-column
+        align="center"
+        v-for="(item, index) in tabHeader"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        :width="item.width"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+const tabHeader = [
+  { prop: "dept", label: "部门", width: 180 },
+  { prop: "name", label: "姓名" },
+  { prop: "area", label: "所属地" },
+];
+const tableData = reactive([
+  {
+    dept: "部门1",
+    name: "李1",
+    area: "1",
+  },
+  {
+    dept: "部门1",
+    name: "李2",
+    area: "1",
+  },
+  {
+    dept: "部门1",
+    name: "李3",
+    area: "3",
+  },
+  {
+    dept: "部门1",
+    name: "李4",
+    area: "2",
+  },
+  {
+    dept: "部门2",
+    name: "李1",
+    area: "5",
+  },
+  {
+    dept: "部门2",
+    name: "李想3",
+    area: "5",
+  },
+  {
+    dept: "部门3",
+    name: "李想33",
+    area: "7",
+  },
+]);
+let mindexGroups = reactive([]);
+let mnameGroups = reactive([]);
+const merge = ref(false)
+onMounted(() => {
+  mindexGroups = generateIndexGroups(tableData, ["dept"]);
+  mnameGroups = generateIndexGroups(tableData, ["dept", "area"]);
+});
+function testf() {
+  console.log(mindexGroups);
+  merge.value = !merge.value;
+}
+function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+  if (merge.value != true)
+  {
+    return;
+  }
+  //第0列
+  if (columnIndex == 0) {
+    for (let i = 0; i < mindexGroups.length; ++i) {
+      if (rowIndex == mindexGroups[i].start) {
+        return [mindexGroups[i].end - mindexGroups[i].start + 1, 1];
+      }
+    }
+    return [0, 0];
+  }
+  //第2列
+  if (columnIndex == 2) {
+    for (let i = 0; i < mnameGroups.length; ++i) {
+      if (rowIndex == mnameGroups[i].start) {
+        return [mnameGroups[i].end - mnameGroups[i].start + 1, 1];
+      }
+    }
+    return [0, 0];
+  }
+}
+function generateIndexGroups(data, field) {
+  let tmp = data.map((i) => {
+    let rstr = "";
+    for (let j = 0; j < field.length; ++j) {
+      rstr += "+" + i[field[j]];
+    }
+    console.log(i, rstr);
+    return rstr;
+  }); //排序
+  return findIndexs(tmp);
+}
+function findIndexs(array) {
+  /* 
+          @params:数组
+          return：一个包含重复序列，开始索引和结束索引的数组
+          如：
+          [
+            {start:0;end:2
+            },
+            {start:3;end:5}
+          ]
+      */
+  let current = array[0];
+  let result = []; //返回结果
+  let startIndex = 0;
+  for (let i = 1; i < array.length; i++) {
+    if (array[i] != current) {
+      //if (startIndex == i -1) continue;
+      result.push({ start: startIndex, end: i - 1 });
+      current = array[i];
+      startIndex = i;
+    }
+  }
+  result.push({ start: startIndex, end: array.length - 1 });
+  return result;
+}
+</script>
+<style lang="scss" scoped></style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-    Vue’s
-    <a target="_blank" href="https://vuejs.org/">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
-    setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
-    your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank"
-      >Cypress Component Testing</a
-    >.
-    <br />
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-    Get official tools and libraries for your project:
-    <a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
-    <a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
-    <a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
-    <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
-    resources, we suggest paying
-    <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-    Got stuck? Ask your question on
-    <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
-    <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
-    You should also subscribe to
-    <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
-    <a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-}
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--color-text);
-}
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-  .item:first-of-type:before {
-    display: none;
-  }
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
 import { createApp } from 'vue'
 import App from './App.vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'  //支持中文
+import router from './router'
 import './assets/main.css'
+import 'element-plus/dist/index.css'
+const app = createApp(App);
+app.use(ElementPlus,{
+    locale: zhCn, //支持中文
+})
+app.use(router)
-createApp(App).mount('#app')
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
+/*
+ * @Author: chlg
+ * @Date: 2023-09-02 13:13:23
+ * @LastEditors: OBKoro1
+ * @LastEditTime: 2023-11-17 16:07:45
+ * @Description: 
+ */
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../components/HomeView.vue'
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/tablemerge',
+      name: 'tablemerge',
+      component: () => import('../components/TableMerge.vue')
+    }
+  ]
+})
+export default router