diff --git a/babel.config.js b/babel.config.js
index b4f89cd..37a2454 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -6,4 +6,4 @@ module.exports = {
 		'@babel/preset-env',
 		['@babel/preset-react', { runtime: 'automatic' }],
 	]
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index fe19286..624eb62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@types/react": "^18.0.28",
         "babel-jest": "^29.5.0",
         "babel-loader": "^9.1.2",
+        "babel-plugin-component": "^1.1.1",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "compression-webpack-plugin": "^10.0.0",
         "copy-webpack-plugin": "^11.0.0",
@@ -4290,6 +4291,36 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "node_modules/babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      }
+    },
+    "node_modules/babel-plugin-component/node_modules/@babel/helper-module-imports": {
+      "version": "7.0.0-beta.35",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
+      "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "7.0.0-beta.35",
+        "lodash": "^4.2.0"
+      }
+    },
+    "node_modules/babel-plugin-component/node_modules/@babel/types": {
+      "version": "7.0.0-beta.35",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz",
+      "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2",
+        "lodash": "^4.2.0",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
     "node_modules/babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -17524,6 +17555,38 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
+          "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.35",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz",
+          "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.2.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
diff --git a/package.json b/package.json
index 6f4b3ba..3c0310a 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@types/react": "^18.0.28",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
@@ -79,4 +80,4 @@
     "framer-motion": "^8.5.5",
     "uuid": "^9.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/vue/components/demo.vue b/vue/components/demo.vue
index 8cb6902..f1e4cfa 100644
--- a/vue/components/demo.vue
+++ b/vue/components/demo.vue
@@ -1,16 +1,194 @@
-
 <template>
-	 <div class="demo">this is a {{name}}</div>	
+  <div>
+    <div class="demo">this is a {{ name }}</div>
+    <hr />
+
+    <div>Table</div>
+    <mytable
+      class="mytable"
+      :data="list"
+      :col="listHead"
+      :filterable="true"
+      filterBy="id>=5"
+      :sortable="true"
+      sortBy="grade,1"
+      border="1px solid blue"
+      bgColor="skyblue"
+      color="red"
+    ></mytable>
+    <hr />
+
+    <div>Modal</div>
+    <button @click="show = true">点击弹框</button>
+    <mymodal
+      v-show="show"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :title="title"
+      :cancelText="cancelText"
+      :confirmText="confirmText"
+      :contentText="contentText"
+      :mask="true"
+      width="20%"
+      bgColor="orange"
+      color="white"
+    ></mymodal>
+    <hr />
+
+    <div>loadImage</div>
+    <loadimage class="loadimage" :duration="300" :timer="2000"></loadimage>
+    <hr />
+
+    <div>Popover</div>
+    <mypop
+      :show="showPop"
+      title="小标题"
+      content="测试一下测试一下"
+      width="150px"
+      color="blue"
+      align="center"
+      :placement="placement"
+    >
+      <button @click="handlePop">点击切换气泡框</button>
+    </mypop>
+    <hr />
+
+    <div>TablePagination</div>
+    <tablepagination
+      class="tablePage"
+      width="80px"
+      height="50px"
+      bgColor="skyblue"
+      border="1px solid red"
+      borderCollapse="collapse"
+      :sortable="true"
+      sortBy="id,1"
+      :data="list"
+      :col="listHead"
+      :pageSize="pageSize"
+      :pageBtn="pageBtn"
+      :currentPage="currentPage"
+      @changeCurrentPage="handleCurrentPage"
+      @prevPage="handlePrev"
+      @nextPage="handleNext"
+    ></tablepagination>
+  </div>
 </template>
-<style scoped>
-	.demo{
-		color:red
-	}
+<style scoped lang="less">
+.demo {
+  color: red;
+}
+.mytable {
+  background-color: rgb(211, 204, 204);
+  border: 1px solid rgb(163, 183, 206);
+  width: 400px;
+  height: 300px;
+  text-align: center;
+  border-collapse: collapse;
+  font-size: 20px;
+  font-family: "Courier New", Courier, monospace;
+}
+.loadimage {
+  width: 300px;
+  padding-top: 250px;
+}
+.tablePage {
+  text-align: left;
+}
 </style>
 <script>
+import { reactive, ref } from "vue";
+import mytable from "./mytable.vue";
+import mymodal from "./mymodal.vue";
+import loadimage from "./loadimage.vue";
+import mypop from "./mypop.vue";
+import tablepagination from "./tablepagination.vue";
 export default {
-	data() {
-		name:'Demo'
-	}
-}
+  setup() {
+    let name = ref("Demo");
+
+    //测试 table 的相关数据
+    let listHead = reactive(["名字", "成绩", "id"]);
+    let list = reactive([
+      { name: "w", grade: 12, id: 1 },
+      { name: "s", grade: 134, id: 2 },
+      { name: "j", grade: 54, id: 3 },
+      { name: "su", grade: 75, id: 4 },
+      { name: "g", grade: 9, id: 5 },
+      { name: "m", grade: 7, id: 6 },
+      { name: "n", grade: 87, id: 7 },
+      { name: "b", grade: 34, id: 8 },
+      { name: "a", grade: 5, id: 9 },
+      { name: "i", grade: 6, id: 10 },
+      { name: "h", grade: 97, id: 11 },
+      { name: "k", grade: 40, id: 12 },
+    ]);
+
+    //测试 modal 的相关数据
+    let show = ref(false);
+    let title = ref("提示");
+    let cancelText = ref("取消呀");
+    let confirmText = ref("确定喽");
+    let contentText = ref("确定删除这个项目吗？");
+    //取消事件的回调函数
+    function handleCancel() {
+      show.value = false;
+    }
+    //确定事件的回调函数
+    function handleConfirm() {
+      show.value = false;
+    }
+
+    //测试 Popover 的相关数据
+    let showPop = ref(false);
+    let placement = ref("right");
+    //切换气泡框的回调函数
+    function handlePop() {
+      showPop.value = !showPop.value;
+    }
+
+    //测试 TablePagination 的相关数据
+    let currentPage = ref(1);
+    let pageSize = ref(5);
+    let pageBtn = ref(3);
+    function handlePrev() {
+      currentPage.value--;
+    }
+    function handleNext() {
+      currentPage.value++;
+    }
+    function handleCurrentPage(p) {
+      currentPage.value = p;
+    }
+
+    return {
+      name,
+      listHead,
+      list,
+      show,
+      title,
+      cancelText,
+      confirmText,
+      contentText,
+      handleCancel,
+      handleConfirm,
+      showPop,
+      placement,
+      handlePop,
+      currentPage,
+      pageSize,
+      pageBtn,
+      handlePrev,
+      handleNext,
+      handleCurrentPage,
+    };
+  },
+  components: {
+    mytable,
+    mymodal,
+    loadimage,
+    mypop,
+    tablepagination,
+  },
+};
 </script>
diff --git a/vue/components/loadimage.vue b/vue/components/loadimage.vue
new file mode 100644
index 0000000..5f1a6f1
--- /dev/null
+++ b/vue/components/loadimage.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="out-wrap">
+    <div class="wrap">
+      <div class="container" ref="container">
+        <img
+          class="image"
+          v-for="(img, index) in imageUrls"
+          :key="index"
+          :src="img"
+          ref="imgs"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { watchEffect, ref, reactive } from "vue";
+export default {
+  name: "loadimage",
+  props: {
+    //要展示的图片的路径
+    imgUrls: {
+      type: Array,
+      default() {
+        return [
+          "https://grocery-cdn.huaban.com/file/356317d0-d5bb-11ec-bc30-f5d45cb676cf.png",
+          "https://grocery-cdn.huaban.com/file/0c393880-d5bb-11ec-9bcf-c7151a5f6a45.png",
+          "https://grocery-cdn.huaban.com/file/7525e0a0-d5bb-11ec-9bcf-c7151a5f6a45.png",
+          "https://cdn.huaban.com/home/202201210156-1e92.png",
+          "https://grocery-cdn.huaban.com/file/f41da6a0-d5ba-11ec-bc30-f5d45cb676cf.png",
+          "https://grocery-cdn.huaban.com/file/a7273280-d5ba-11ec-bc30-f5d45cb676cf.png"
+        ];
+      },
+    },
+    //图片宽度
+    imgWidth: {
+      type: String,
+      default: "200px",
+    },
+    //图片高度
+    imgHeight: {
+      type: String,
+      default: "292px",
+    },
+    //图片的过渡时间
+    duration: {
+      type: Number,
+      default: 300,
+    },
+    //图片的显示时间，值不能低于2倍的duration
+    timer: {
+      type: Number,
+      default: 3000,
+    },
+    //图片的过渡函数
+    timingFunction: {
+      type: String,
+      default: "linear",
+    },
+  },
+  setup(props) {
+    const container = ref(null);
+    const imgs = ref([]);
+    let imageUrls=JSON.parse(JSON.stringify(props.imgUrls))
+    imageUrls.push(props.imgUrls[0])
+    watchEffect(() => {
+      if (container.value && imgs.value) {
+        imgs.value.forEach((ele) => {
+          ele.style.width = props.imgWidth;
+          ele.style.height = props.imgHeight;
+          ele.style.transition =
+            "all " + props.duration / 1000 + "s " + props.timingFunction;
+        });
+        let i = 0;//定义变量，主要用于计算图片容器的位移量
+        setInterval(() => {
+          //判断图片是否到了最后一张
+          if (-i === imgs.value.length - 1) {
+            i = 0;
+          }
+          //将当前图片退出
+          for (let j = 0; j < imgs.value.length; j++) {
+            if (-i == j) {
+              imgs.value[j].style.opacity = "0";
+            } else {
+              imgs.value[j].style.opacity = "1";
+            }
+          }
+           //显示下一张图片
+          i--;
+          setTimeout(() => {
+            container.value.style.transition =
+              "all " + props.duration / 1000 + "s " + props.timingFunction;
+            container.value.style.transform =
+              "translateY(" + i * parseInt(props.imgHeight) + "px)";
+          }, props.duration); 
+           //判断当前图片是否到了最后一张，如果是最后一张，需要将过渡去掉，将图片改为第一张
+          if (i === -(imgs.value.length - 1)) {
+            setTimeout(() => {
+              //将图片改为第一张
+              container.value.style.transition = "none";
+              container.value.style.transform = "translateY(0)";
+            }, 2 * props.duration);
+          }
+        }, props.timer); //可以在此设置定时器的执行间隔，执行间隔最小不能低于2倍的过渡时间
+      }
+    });
+    return {
+      container,
+      imgs,
+      imageUrls
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.out-wrap {
+  box-sizing: border-box;
+  padding-top: 200px;
+  height: 400px;
+  width: 200px;
+  overflow: hidden;
+  transform: scale(1);
+  transition: 0.2s linear;
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+.wrap {
+  border-radius: 12px;
+  overflow: hidden;
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transform: translateY(0);
+    // transition: all 0.3s linear;
+    .image {
+      width: 200px;
+      height: 292px;
+      opacity: 1;
+      //   transition: all 0.3s;
+    }
+  }
+}
+</style>
diff --git a/vue/components/mymodal.vue b/vue/components/mymodal.vue
new file mode 100644
index 0000000..a2fcc63
--- /dev/null
+++ b/vue/components/mymodal.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="wrap">
+    <div class="mask" v-show="mask"></div>
+    <div class="modal" ref="modal">
+      <div class="title">{{ title }}</div>
+      <div class="content">{{ contentText }}</div>
+      <div class="foot">
+        <button id="cancel" @click="clickCancel">{{ cancelText }}</button>
+        <button id="confirm" @click="clickConfirm">{{ confirmText }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watchEffect } from "vue";
+export default {
+  name: "mymodal",
+  props: {
+    //弹出框的标题
+    title: {
+      type: String,
+      default: "提示",
+    },
+    //取消按钮的文本内容
+    cancelText: {
+      type: String,
+      default: "取消",
+    },
+    //确定按钮的文本内容
+    confirmText: {
+      type: String,
+      default: "确定",
+    },
+    //弹出框的正文内容
+    contentText: {
+      type: String,
+      default: "确定删除吗？",
+    },
+    //是否显示遮罩层
+    mask: {
+      type: Boolean,
+      default: false,
+    },
+    //弹出框的宽度
+    width: {
+      type: String,
+      default: "30%",
+    },
+    //弹出框的文本颜色
+    color: {
+      type: String,
+      default: "black",
+    },
+    //弹出框的背景颜色
+    bgColor: {
+      type: String,
+      default: "white",
+    },
+  },
+  setup(props, { emit }) {
+    const modal = ref(null);
+    watchEffect(() => {
+      if (modal.value) {
+        modal.value.style.width = props.width;
+        modal.value.style.color = props.color;
+        modal.value.style.backgroundColor = props.bgColor;
+      }
+    });
+    
+   // @ description: 点击取消按钮的回调函数
+    function clickCancel() {
+      emit("cancel", false);
+    }
+    // @ description: 点击确定按钮的回调函数
+    function clickConfirm() {
+      emit("confirm", false);
+    }
+
+    return {
+      modal,
+      clickCancel,
+      clickConfirm,
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.wrap {
+  .mask {
+    background-color: rgba(8, 7, 7, 0.5);
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 99999;
+  }
+  .modal {
+    padding: 20px 30px;
+    position: absolute;
+    z-index: 100000;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    box-shadow: 0 0 10px rgb(199, 192, 192);
+    .title {
+      font-size: 14px;
+    }
+    .content {
+      padding: 20px 0;
+    }
+    .foot {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      button {
+        border: 1px solid rgb(180, 175, 175);
+        font-size: 14px;
+        padding: 5px 8px;
+      }
+      #cancel {
+        background-color: white;
+      }
+      #confirm {
+        background-color: rgb(15, 99, 224);
+        color: white;
+        border: 1px solid transparent;
+      }
+    }
+  }
+}
+</style>
diff --git a/vue/components/mypop.vue b/vue/components/mypop.vue
new file mode 100644
index 0000000..7a3f44d
--- /dev/null
+++ b/vue/components/mypop.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="after">
+    <div class="element" v-show="show" ref="element"></div>
+    <slot></slot>
+    <div class="content-wrap" v-show="show" ref="contentWrap">
+      <h5 class="title">{{ title }}</h5>
+      <div class="content">{{ content }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watchEffect } from "vue";
+export default {
+  name: "mypop",
+  props: {
+    //控制气泡框的显示与隐藏
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    //气泡框的标题
+    title: {
+      type: String,
+      default: "气泡框标题",
+    },
+    //气泡框的内容
+    content: {
+      type: String,
+      default: "我是气泡框内容区我是气泡框内容区我是气泡框内容区",
+    },
+    //气泡框的宽度
+    width: {
+      type: String,
+      default: "150px",
+    },
+    //气泡框内文字的对齐方式
+    align: {
+      type: String,
+      default: "left",
+    },
+    //气泡框内文字的颜色
+    color: {
+      type: String,
+      default: "black",
+    },
+    //气泡框的出现位置
+    placement: {
+      type: String,
+      default: "bottom",
+    },
+  },
+  setup(props) {
+    const contentWrap = ref(null);
+    const element = ref(null);
+    watchEffect(() => {
+      if (element.value && contentWrap.value) {
+        contentWrap.value.style.width = props.width;
+        contentWrap.value.style.textAlign = props.align;
+        contentWrap.value.style.color = props.color;
+        switch (props.placement) {
+          case "left":
+            contentWrap.value.classList.add("tLeft", "cLeft");
+            element.value.classList.add("tLeft", "eLeft");
+            break;
+          case "right":
+            contentWrap.value.classList.add("tRight", "cRight");
+            element.value.classList.add("tRight", "eRight");
+            break;
+          case "top":
+            contentWrap.value.classList.add("top", "cTop");
+            element.value.classList.add("top", "eTop");
+            break;
+          case "bottom":
+            contentWrap.value.classList.add("bottom", "cBottom");
+            element.value.classList.add("bottom", "eBottom");
+            break;
+        }
+      }
+    });
+
+    return {
+      contentWrap,
+      element,
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.after {
+  position: relative;
+  display: inline-block;
+  .content-wrap {
+    position: absolute;
+    box-shadow: 0 0 15px rgba(63, 61, 61, 0.4);
+    background-color: white;
+    padding: 20px;
+    .title {
+      margin: 0;
+      padding-bottom: 15px;
+    }
+  }
+}
+.element {
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  position: absolute;
+  z-index: 2;
+}
+.tLeft {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tRight {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.cLeft {
+  margin-right: 16px;
+}
+.cRight {
+  margin-left: 16px;
+}
+.cTop {
+  margin-bottom: 16px;
+}
+.cBottom {
+  margin-top: 16px;
+}
+.eLeft {
+  border-left: 8px solid white;
+}
+.eRight {
+  border-right: 8px solid white;
+}
+.eTop {
+  border-top: 8px solid white;
+}
+.eBottom {
+  border-bottom: 8px solid white;
+}
+</style>
diff --git a/vue/components/mytable.vue b/vue/components/mytable.vue
new file mode 100644
index 0000000..8f4b4d6
--- /dev/null
+++ b/vue/components/mytable.vue
@@ -0,0 +1,209 @@
+<template>
+  <table ref="table">
+    <thead>
+      <tr>
+        <td v-for="(head, index) in col" :key="index" ref="tds">
+          {{ head }}
+        </td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item, index) in dataArr" :key="index">
+        <td v-for="(value, attr) in item" :key="attr" ref="tds">
+          {{ value }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { reactive, ref, watchEffect } from "vue";
+export default {
+  name: "mytable",
+  props: {
+    //要展示为表格的数据
+    data: {
+      type: Array,
+    },
+    //表头
+    col: {
+      type: Array,
+    },
+    //是否排序
+    sortable: {
+      type: Boolean,
+      default: false,
+    },
+    //排序规则，字符串中间用逗号分开，逗号前面的为排序依据，逗号后面的为排序方式，可选值有-1和1，-1表示降序，1表示升序
+    sortBy: {
+      type: String,
+    },
+    //是否筛选
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    //筛选条件
+    filterBy: {
+      type: String,
+    },
+    //单元格内文本的水平对齐方式
+    tAlign: {
+      type: String,
+      default: "center",
+    },
+    //单元格内文本的垂直对齐方式
+    vAlign: {
+      type: String,
+      default: "middle",
+    },
+    //单元格边框
+    border: {
+      type: String,
+      default: "1px solid yellow",
+    },
+    //单元格内的文本颜色
+    color: {
+      type: String,
+      default: "black",
+    },
+    //单元格的背景颜色
+    bgColor: {
+      type: String,
+      default: "white",
+    },
+  },
+  setup(props) {
+    let arr = JSON.parse(JSON.stringify(props.data));
+    //排序
+    if (props.sortable) {
+      sortData(props.sortBy,arr)
+    }
+    //筛选
+    if (props.filterable) {
+      filterData(props.filterBy,arr)
+      }
+    
+
+    let dataArr = reactive([]);
+    dataArr.push(...arr);
+
+    const tds = ref([]);
+    const table = ref(null);
+
+    watchEffect(() => {
+      if (table.value && tds.value) {
+        tds.value.forEach((ele) => {
+          ele.style.backgroundColor = props.bgColor;
+          ele.style.color = props.color;
+          ele.style.textAlign = props.tAlign;
+          ele.style.verticalAlign = props.vAlign;
+          ele.style.border = props.border;
+        });
+      }
+    });
+
+
+     /*
+    @ description: 对数据进行排序
+    @ param: sortBy String 排序规则
+    @ param: arr Array 要排序的初始数据
+    @ return: void
+    */
+     function sortData(sortBy,arr){
+      let keyword = sortBy.trim().split(",")[0].trim();
+      let order = sortBy.trim().split(",")[1].trim() || 1;
+      for (let i = 0; i < arr.length; i++) {
+        for (let j = 0; j < arr.length - 1 - i; j++) {
+          if (order == 1) {
+            if (arr[j][keyword] > arr[j + 1][keyword]) {
+              let temp = arr[j + 1];
+              arr[j + 1] = arr[j];
+              arr[j] = temp;
+            }
+          } else {
+            if (arr[j][keyword] < arr[j + 1][keyword]) {
+              let temp = arr[j];
+              arr[j] = arr[j + 1];
+              arr[j + 1] = temp;
+            }
+          }
+        }
+      }
+    }
+
+    /*
+    @ description: 对数据进行筛选
+    @ param: sortBy String 筛选条件
+    @ param: arr Array 要筛选的初始数据
+    @ return: void
+    */
+    function filterData(filterBy,arr){
+      let key = filterBy.trim().split(/\b/g)[0].trim();
+      let relation = filterBy.trim().split(/\b/g)[1].trim();
+      let value = filterBy.trim().split(/\b/g)[2].trim();
+      for (let i = 0; i < arr.length; i++) {
+        switch (relation) {
+          case ">":
+            if (arr[i][key] <= value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case ">=":
+            if (arr[i][key] < value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "<":
+            if (arr[i][key] >= value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "<=":
+            if (arr[i][key] > value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "==":
+            if (arr[i][key] != value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "!=":
+            if (arr[i][key] == value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "===":
+            if (arr[i][key] !== value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "!==":
+            if (arr[i][key] === value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+        }
+      }
+    }
+
+    return {
+      dataArr,
+      tds,
+      table,
+    };
+  },
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/vue/components/tablepagination.vue b/vue/components/tablepagination.vue
new file mode 100644
index 0000000..12a7a4e
--- /dev/null
+++ b/vue/components/tablepagination.vue
@@ -0,0 +1,371 @@
+<template>
+  <div>
+    <table class="table" ref="table">
+      <thead>
+        <tr>
+          <td v-for="(head, index) in col" :key="index" ref="tds">
+            {{ head }}
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in dataArr" :key="index">
+          <td v-for="(value, attr) in item" :key="attr" ref="tds">
+            {{ value }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="pagination">
+      <button :disabled="currentPage == 1" @click="handlePrev" :class="{disabled:currentPage == 1}">
+        &lt;&lt;上一页
+      </button>
+      <button v-show="startAndEnd.start > 1" @click="handleCurrentPage(1)">
+        1
+      </button>
+      <button v-show="startAndEnd.start > 2">•••</button>
+
+      <button
+        @click="handleCurrentPage(index + startAndEnd.start)"
+        v-for="(page, index) in startAndEnd.end - startAndEnd.start + 1"
+        :key="index"
+        :class="{ active: currentPage == index + startAndEnd.start }"
+      >
+        {{ index + startAndEnd.start }}
+      </button>
+
+      <button v-show="startAndEnd.end < pages - 1">•••</button>
+      <button
+        v-show="startAndEnd.end < pages"
+        @click="handleCurrentPage(pages)"
+      >
+        {{ pages }}
+      </button>
+      <button :disabled="currentPage == pages" @click="handleNext" :class="{disabled:currentPage == pages}">
+        下一页&gt;&gt;
+      </button>
+
+      <button>共 {{ pages }} 页</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, ref, watchEffect } from "vue";
+export default {
+  name: "tablepagination",
+  props: {
+    //要展示为表格的数据
+    data: {
+      type: Array,
+    },
+    //表头
+    col: {
+      type: Array,
+    },
+    //是否排序
+    sortable: {
+      type: Boolean,
+      default: false,
+    },
+    //排序方式：字符串中间用逗号分开，逗号前面的为排序依据，逗号后面的为排序方式，可选值有-1和1，-1表示降序，1表示升序
+    sortBy: {
+      type: String,
+    },
+    //是否筛选
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    //筛选条件
+    filterBy: {
+      type: String,
+    },
+    //单元格的宽度
+    width: {
+      type: String,
+      default: "30px",
+    },
+    //单元格的高度
+    height: {
+      type: String,
+      default: "30px",
+    },
+    //单元格内的文本颜色
+    color: {
+      type: String,
+      default: "black",
+    },
+    //单元格的背景颜色
+    bgColor: {
+      type: String,
+      default: "white",
+    },
+    //单元格内文本的水平对齐方式
+    tAlign: {
+      type: String,
+      default: "center",
+    },
+    //单元格内文本的垂直对齐方式
+    vAlign: {
+      type: String,
+      default: "middle",
+    },
+    //单元格边框
+    border: {
+      type: String,
+      default: "1px solid yellow",
+    },
+    //单元格之间的边框是否合并
+    borderCollapse: {
+      type: String,
+      default: "collapse",
+    },
+    //单页表格展示的数据数量
+    pageSize: {
+      type: Number,
+      default: 5,
+    },
+    //每页表格连续页码的数量
+    pageBtn: {
+      type: Number,
+      default: 5,
+    },
+    //当前页
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props, { emit }) {
+    //对接收到的父组件传来的数据进行深拷贝，筛选出符合标准的数据并排序
+    let arr=JSON.parse(JSON.stringify(props.data))
+    //排序
+    if (props.sortable) {
+      sortData(props.sortBy,arr)
+    }
+     //筛选
+    if (props.filterable) {
+      filterData(props.filterBy,arr)
+    }
+
+    //计算数据总条数
+    let total = ref(arr.length);
+    //获取dom元素
+    const tds = ref([]);
+    const table = ref(null);
+    //设置表格样式
+    watchEffect(() => {
+      if (table.value && tds.value) {
+        table.value.style.borderCollapse = props.borderCollapse;
+        tds.value.forEach((ele) => {
+          ele.style.width = props.width;
+          ele.style.height = props.height;
+          ele.style.color = props.color;
+          ele.style.backgroundColor = props.bgColor;
+          ele.style.textAlign = props.tAlign;
+          ele.style.verticalAlign = props.vAlign;
+          ele.style.border = props.border;
+        });
+      }
+    });
+
+    //计算表格单页展示的数据
+    const dataArr = computed(() => {
+      let startIndex = (props.currentPage - 1) * props.pageSize;
+      let endIndex =
+        startIndex + props.pageSize > arr.length
+          ? arr.length
+          : startIndex + props.pageSize;
+      return arr.slice(startIndex, endIndex);
+    });
+    //计算总页数
+    const pages = computed(() => {
+      return Math.ceil(total.value / props.pageSize);
+    });
+    //计算连续页码的开始页码和结束页码
+    const startAndEnd = computed(() => {
+      let start = 0,
+        end = 0;
+      if (props.pageBtn >= Math.ceil(total.value / props.pageSize)) {
+        start = 1;
+        end = Math.ceil(total.value / props.pageSize);
+      } else {
+        start = props.currentPage - parseInt(props.pageBtn / 2);
+        end = props.currentPage + parseInt(props.pageBtn / 2);
+        if (start < 1) {
+          start = 1;
+          end = props.pageBtn;
+        }
+        if (end > Math.ceil(total.value / props.pageSize)) {
+          end = Math.ceil(total.value / props.pageSize);
+          start = Math.ceil(total.value / props.pageSize) - props.pageBtn + 1;
+        }
+      }
+      return { start, end };
+    });
+    
+    
+    /*
+    @ description: 对数据进行排序
+    @ param: sortBy String 排序规则
+    @ param: arr Array 要排序的初始数据
+    @ return: void
+    */
+     function sortData(sortBy,arr){
+      let keyword = sortBy.trim().split(",")[0].trim();
+      let order = sortBy.trim().split(",")[1].trim() || 1;
+      for (let i = 0; i < arr.length; i++) {
+        for (let j = 0; j < arr.length - 1 - i; j++) {
+          if (order == 1) {
+            if (arr[j][keyword] > arr[j + 1][keyword]) {
+              let temp = arr[j + 1];
+              arr[j + 1] = arr[j];
+              arr[j] = temp;
+            }
+          } else {
+            if (arr[j][keyword] < arr[j + 1][keyword]) {
+              let temp = arr[j];
+              arr[j] = arr[j + 1];
+              arr[j + 1] = temp;
+            }
+          }
+        }
+      }
+    }
+
+    /*
+    @ description: 对数据进行筛选
+    @ param: sortBy String 筛选条件
+    @ param: arr Array 要筛选的初始数据
+    @ return: void
+    */
+    function filterData(filterBy,arr){
+      let key = filterBy.trim().split(/\b/g)[0].trim();
+      let relation = filterBy.trim().split(/\b/g)[1].trim();
+      let value = filterBy.trim().split(/\b/g)[2].trim();
+      for (let i = 0; i < arr.length; i++) {
+        switch (relation) {
+          case ">":
+            if (arr[i][key] <= value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case ">=":
+            if (arr[i][key] < value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "<":
+            if (arr[i][key] >= value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "<=":
+            if (arr[i][key] > value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "==":
+            if (arr[i][key] != value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "!=":
+            if (arr[i][key] == value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "===":
+            if (arr[i][key] !== value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+          case "!==":
+            if (arr[i][key] === value) {
+              arr.splice(i, 1);
+              i--;
+            }
+            break;
+        }
+      }
+    }
+    
+    /*
+    @ description: 点击上一页的回调函数
+    @ return: void
+    */
+    function handlePrev() {
+      if (props.currentPage > 1) {
+        emit("prevPage");
+      }
+    }
+    /*
+    @ description: 点击下一页的回调函数
+    @ return: void
+    */
+    function handleNext() {
+      if (props.currentPage < pages.value) {
+        emit("nextPage");
+      }
+    }
+    /*
+    @ description: 点击页码的回调函数
+    @ param: p Number 点击的页码
+    @ return: void
+    */
+    function handleCurrentPage(p) {
+      emit("changeCurrentPage", p);
+    }
+
+    return {
+      dataArr,
+      tds,
+      table,
+      total,
+      pages,
+      handlePrev,
+      handleNext,
+      handleCurrentPage,
+      startAndEnd
+    };
+  }
+};
+</script>
+
+<style scoped lang="less">
+.pagination {
+  // text-align: center;
+  margin-top: 20px;
+  button {
+    box-sizing: border-box;
+    color: #606266;
+    height: 28px;
+    // line-height: 28px;
+    font-size: 13px;
+    text-align: center;
+    vertical-align: middle;
+    margin: 0 5px;
+    padding: 0 4px;
+    border-radius: 2px;
+    background-color: #f4f4f5;
+    outline: none;
+    border: 0;
+    min-width: 35.5px;
+  }
+  .active {
+    background-color: #409eff;
+    color: #fff;
+  }
+  .disabled{
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/vue/vue_main.js b/vue/vue_main.js
index 01af16d..ed80851 100644
--- a/vue/vue_main.js
+++ b/vue/vue_main.js
@@ -3,8 +3,7 @@
 import {createApp} from 'vue'
 import App from './App.vue'
 
-
 createApp(App).mount("#app")
 // new Vue({
 //   render: h => h(App)
-// }).$mount('#app');
\ No newline at end of file
+// }).$mount('#app');