From 8019adc589b7b490e92ed094ffddc29f15122e55 Mon Sep 17 00:00:00 2001
From: roger_home_pc <roger_sun@outlook.com>
Date: Mon, 25 Sep 2023 21:45:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=20Table=20Demo=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      |   4 +-
 src/main.js                      |   5 +-
 src/router/index.js              |  21 ++---
 src/store/index.js               |  37 --------
 src/store/modules/ModuleA.js     |  22 -----
 src/store/modules/ModuleB.js     |  23 -----
 src/views/CompositionAPIView.vue |  79 ----------------
 src/views/OptionsAPIView.vue     | 150 -------------------------------
 src/views/Table_Demo1.vue        |  36 ++++++++
 9 files changed, 51 insertions(+), 326 deletions(-)
 delete mode 100644 src/store/index.js
 delete mode 100644 src/store/modules/ModuleA.js
 delete mode 100644 src/store/modules/ModuleB.js
 delete mode 100644 src/views/CompositionAPIView.vue
 delete mode 100644 src/views/OptionsAPIView.vue
 create mode 100644 src/views/Table_Demo1.vue

diff --git a/src/App.vue b/src/App.vue
index 2ab91da..354cb24 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <router-link :to="{name:'options'}">OptionsAPI</router-link>
-    |
-    <router-link :to="{name:'composition'}">CompositionAPI</router-link>
+    <router-link :to="{name:'table1'}">Table Demo 1</router-link>
   </div>
   <div>
     <router-view></router-view>
diff --git a/src/main.js b/src/main.js
index 225b6e1..2df3148 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import {createApp} from "vue";
 import App from "./App.vue"
 import router from './router'
-import store from './store'
+import ElementPlus from "element-plus"
+import "element-plus/dist/index.css"
 
-createApp(App).use(router).use(store).mount('#app')
+createApp(App).use(ElementPlus).use(router).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 619eba5..03e92fe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,23 +1,24 @@
 // 引入必要的router组件
 import {createRouter, createWebHistory} from 'vue-router'
 // 引入视图
-const OptionsAPI = () => import('../views/OptionsAPIView.vue')
-const CompositionAPI = () => import('../views/CompositionAPIView.vue')
+// const root = () => import('../App.vue')
+const tableDemo1 = () => import('../views/Table_Demo1.vue')
+
 
 // 引入组件
 
 
 // 创建路由
 const routes = [
+    // {
+    //     path: "/",
+    //     name: 'root',
+    //     component: root
+    // },
     {
-        path: '/options',
-        name: 'options',
-        component: OptionsAPI
-    },
-    {
-        path: '/composition',
-        name: 'composition',
-        component: CompositionAPI
+        path: '/table1',
+        name: 'table1',
+        component: tableDemo1
     },
 ]
 
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index 80e7265..0000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {createStore} from "vuex";
-import {moduleA} from "@/store/modules/ModuleA";
-import {moduleB} from "@/store/modules/ModuleB";
-
-export default createStore({
-    modules: {
-        module_a: moduleA,
-        module_b: moduleB,
-    },
-    state: {
-        count: 3,
-    },
-    getters: {
-        // getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
-        getter: (state) => (n) => {
-            return state.count * n;
-        },
-    },
-    mutations: {
-        // payload用于携带参数
-        mutation(state, payload) {
-            state.count += payload.num
-        }
-    },
-    actions: {
-        action(content, payload) {
-            // 模拟异步操作
-            setTimeout(() => {
-                // rep 模拟axios请求返回的数据
-                const rep = 3;
-                if (content.state.count > 50) {
-                    content.commit('mutation', {num: rep + payload.num});
-                }
-            }, 1000)
-        }
-    }
-})
diff --git a/src/store/modules/ModuleA.js b/src/store/modules/ModuleA.js
deleted file mode 100644
index 00d45c5..0000000
--- a/src/store/modules/ModuleA.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export const moduleA = {
-    state: {
-        state_a: 1,
-    },
-    getters: {
-        getter_a: (state) => {
-            return state.state_a + 10;
-        }
-    },
-    mutations: {
-        mutation_a(state, payload) {
-            state.state_a += payload.num;
-        }
-    },
-    actions: {
-        action_a(content, payload) {
-            if (content.state.state_a > 50) {
-                content.commit('mutation_a', {num: payload.num})
-            }
-        }
-    }
-}
diff --git a/src/store/modules/ModuleB.js b/src/store/modules/ModuleB.js
deleted file mode 100644
index 78412a5..0000000
--- a/src/store/modules/ModuleB.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export const moduleB = {
-    namespaced: true,
-    state: {
-        state_b: 2,
-    },
-    getters: {
-        getter_b: (state) => {
-            return state.state_b + 10;
-        }
-    },
-    mutations: {
-        mutation_b: (state, payload) => {
-            state.state_b += payload.num;
-        }
-    },
-    actions: {
-        action_b: (content, payload) => {
-            if (content.state.state_b > 50) {
-                content.commit('mutation_b', {num: payload.num})
-            }
-        },
-    }
-}
diff --git a/src/views/CompositionAPIView.vue b/src/views/CompositionAPIView.vue
deleted file mode 100644
index 093c864..0000000
--- a/src/views/CompositionAPIView.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <!-- 对state的操作 -->
-  <h3>对state的操作</h3>
-  <p><span><b>根-store.state.count: </b></span>{{ store.state.count }}</p>
-  <p><span><b>A-store.state.state_a: </b></span>{{ store.state.module_a.state_a }}</p>
-  <p><span><b>B-store.state.module_b.state_b: </b></span>{{ store.state.module_b.state_b }}</p>
-
-  <!-- 对getters的操作 -->
-  <h3>对getters的操作</h3>
-  <p><span><b>根-store.getters.getter(3): </b></span>{{ store.getters.getter(3) }}</p>
-  <p><span><b>A-store.getters.getter_a: </b></span>{{ store.getters.getter_a }}</p>
-  <p><span><b>B-store.getters['module_b/getter_b']: </b></span>{{ store.getters['module_b/getter_b'] }}</p>
-
-  <!-- 对mutations的操作 -->
-  <h3>对mutations的操作</h3>
-  <p><span><b>根-store.commit('mutation', {num: 7}): </b></span>
-    <button @click="root_mutation">点一下根store+7</button>
-  </p>
-  <p><span><b>A-store.commit('mutation_a', {num: 8}): </b></span>
-    <button @click="moduleA_mutation">点一下state_a+8</button>
-  </p>
-  <p><span><b>B-store.commit('module_b/mutation_b', {num: 9}): </b></span>
-    <button @click="moduleB_mutation">点一下state_b+9</button>
-  </p>
-
-    <!-- 对actions的操作 -->
-    <h3>对actions的操作</h3>
-    <p><span><b>根-store.dispatch('action', {num: 7}): </b></span>
-      <button @click="root_action">如果store>50 点一下store+10</button>
-    </p>
-    <p><span><b>A-store.dispatch('action_a', {num: 8}): </b></span>
-      <button @click="moduleA_action">如果state_a>50 点一下state_a+8</button>
-    </p>
-    <p><span><b>B-store.dispatch('module_b/action_b', {num: 9}): </b></span>
-      <button @click="moduleB_action">如果state_b>50 点一下state_b+9</button>
-    </p>
-</template>
-
-<script setup>
-import {useStore} from "vuex";
-
-// 实例化useStore对象
-const store = useStore()
-
-// 根store的mutation操作
-const root_mutation = () => {
-  store.commit('mutation', {num: 7})
-}
-
-// moduleA的mutation操作
-const moduleA_mutation = () => {
-  store.commit('mutation_a', {num: 8})
-}
-
-// moduleB的mutation操作
-const moduleB_mutation = () => {
-  store.commit('module_b/mutation_b', {num: 9})
-}
-
-// 根store的action操作
-const root_action = () => {
-  store.dispatch('action', {num: 7})
-}
-
-// moduleA的action操作
-const moduleA_action = () => {
-  store.dispatch('action_a', {num: 8})
-}
-
-// moduleB的action操作
-const moduleB_action = () => {
-  store.dispatch('module_b/action_b', {num: 9})
-}
-
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/OptionsAPIView.vue b/src/views/OptionsAPIView.vue
deleted file mode 100644
index afef248..0000000
--- a/src/views/OptionsAPIView.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <!-- 对state的操作 -->
-  <h3>对state的操作</h3>
-  <p><span><b>根-count: </b></span>{{ count }}</p>
-  <p><span><b>A-state_a: </b></span>{{ state_a }}</p>
-  <p><span><b>B-state_b: </b></span>{{ state_b }}</p>
-
-  <!-- 对getters的操作 -->
-  <h3>对getters的操作</h3>
-  <p><span><b>根-getter(3): </b></span>{{ getter(3) }}</p>
-  <p><span><b>A-getter_a: </b></span>{{ getter_a }}</p>
-  <p><span><b>B-getter_b: </b></span>{{ getter_b }}</p>
-
-  <!-- 对mutations的操作 -->
-  <h3>对mutations的操作</h3>
-  <p><span><b>根-@click="mutation({num: 7})": </b></span>
-    <button @click="mutation({num: 7})">点一下根store+7</button>
-  </p>
-  <p><span><b>A-@click="mutation_a({num: 8})": </b></span>
-    <button @click="mutation_a({num: 8})">点一下state_a+8</button>
-  </p>
-  <p><span><b>B-@click="mutation_b({num: 9})": </b></span>
-    <button @click="mutation_b({num: 9})">点一下moduleB+9</button>
-  </p>
-
-  <!-- 对actions的操作 -->
-  <h3>对actions的操作</h3>
-  <p><span><b>根-@click="action({num: 7})": </b></span>
-    <button @click="action({num: 7})">如果store>50 点一下store+10</button>
-  </p>
-  <p><span><b>A-@click="action_a({num: 8})": </b></span>
-    <button @click="action_a({num: 8})">如果state_a>50 点一下state_a+8</button>
-  </p>
-  <p><span><b>B-@click="action_b({num: 9})": </b></span>
-    <button @click="action_b({num: 9})">如果state_b>50 点一下state_b+9</button>
-  </p>
-
-  <h3>混合用法</h3>
-  <p><span><b>state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a: </b></span>{{
-      state_b_getter_a
-    }}</p>
-  <p><span><b>state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"]: </b></span>{{
-      state_a_getter_b
-    }}</p>
-  <p><span><b>state_b_getter_b: (state, getters) => state.state_b + getters.getter_b: </b></span>{{ state_b_getter_b }}
-  </p>
-  <p><span><b>@click="mutation_a_count(100): </b></span>
-    <button @click="mutation_a_count(100)">如果state_a>50 点一下state_a+100</button>
-  </p>
-  <p><span><b>@click="action_b_count(200): </b></span>
-    <button @click="action_b_count(200)">如果state_b>50 点一下state_b+200</button>
-  </p>
-
-</template>
-
-<script>
-import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
-
-export default {
-  name: "OptionsAPIView",
-  // computed 用于 mapState和mapGetters
-  computed: {
-    // // 数组形式
-    // // 映射全局state
-    // ...mapState(["count", "state_a"]),  // state名称就是map后的名称，这里模块中的state是无法映射的
-    // // 映射带有名称空间的state
-    // ...mapState("module_b", ["state_b"]),  // 第一个参数为模块的别名
-    //
-    // // 映射全局Getters
-    // ...mapGetters(["getter", "getter_a"]),
-    // // 映射带有命名空间的Getters
-    // ...mapGetters("module_b", ["getter_b"]),
-
-    // 对象形式
-    // 映射全局state和带有namespaced命名空间的state
-    ...mapState({
-      count: "count",
-      state_a: state => state.module_a.state_a,
-      // state_b: state => state.module_b.state_b
-    }),
-    // 指定命名空间的state映射
-    ...mapState("module_b", {
-      state_b: state => state.state_b
-    }),
-
-    // 映射全局Getters
-    ...mapGetters({
-      getter: "getter",
-      getter_a: "getter_a"
-    }),
-    // 映射带有命名空间的Getters
-    ...mapGetters("module_b", {
-      getter_b: "getter_b",
-    }),
-
-    // 混合用法
-    ...mapState({
-      state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a,
-      state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"],
-    }),
-    ...mapState("module_b", {
-      state_b_getter_b: (state, getters) => state.state_b + getters.getter_b,
-    })
-
-  },
-  methods: {
-    // // 数组形式
-    // // 映射全局的 mutations
-    // ...mapMutations(["mutation", "mutation_a"]),
-    // // 映射带有命名空间的mutations
-    // ...mapMutations("module_b", ["mutation_b"]),
-    // // 映射全局的 actions
-    // ...mapActions(["action", "action_a"]),
-    // // 映射带有命名空间的actions
-    // ...mapActions("module_b", ["action_b"]),
-
-    // 对象形式
-    // 映射全局的mutations
-    ...mapMutations({
-      mutation: "mutation",
-      mutation_a: "mutation_a",
-    }),
-    // 映射带有命名空间的mutations
-    ...mapMutations("module_b", {
-      mutation_b: "mutation_b",
-    }),
-    // 映射全局的actions
-    ...mapActions({
-      action: "action",
-      action_a: "action_a"
-    }),
-    // 映射带有命名空间namespaced的actions
-    ...mapActions("module_b", {
-      action_b: "action_b"
-    }),
-    // 组合用法
-    ...mapMutations({
-      mutation_a_count: (commit, count) => commit("mutation_a", {num: count})
-    }),
-    ...mapActions("module_b", {
-      action_b_count: (dispatch, count) => dispatch("action_b", {num: count})
-    })
-
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/Table_Demo1.vue b/src/views/Table_Demo1.vue
new file mode 100644
index 0000000..8808227
--- /dev/null
+++ b/src/views/Table_Demo1.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-table :data="tableData">
+    <el-table-column prop="date" label="Date" width="180"></el-table-column>
+    <el-table-column prop="name" label="Name" width="180"></el-table-column>
+    <el-table-column prop="address" label="Address" ></el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo1",
+  data() {
+    return {
+      tableData: [
+        { date: "2016-05-03",
+          name: "Tom",
+          address: "No. 189, Grove St, Los Angeles"},
+        { date: "2016-05-04",
+          name: "Tom1",
+          address: "No. 1891, Grove St, Los Angeles"},
+        { date: "2016-05-05",
+          name: "Tom2",
+          address: "No. 1892, Grove St, Los Angeles"},
+        { date: "2016-05-06",
+          name: "Tom3",
+          address: "No. 1893, Grove St, Los Angeles"},
+      ]
+    }
+
+  },
+}
+</script>
+
+<style scoped>
+
+</style>