vue实现表格筛选排序分页

vue/App.vue

@@ -1,20 +1,19 @@
-
 <template>
   <div class="App">
-    <Demo/>
+    <Demo />
   </div>
 </template>
 
 <script>
-import Demo from './components/demo.vue';
+import Demo from "./components/demo.vue";
 export default {
   components: { Demo },
-  name: 'App',
+  name: "App",
 
   data() {
     return {
-        msg: "有追求的",
+      msg: "有追求的",
     };
-  }
+  },
 };
 </script>

vue/components/Table/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            @click="sort(col)"
+            class="tableHeader"
+          >
+            {{ col.title }}
+            <span v-if="sortKey === col.field">
+              {{ sortOrder === "asc" ? "▲" : "▼" }}
+            </span>
+          </th>
+        </tr>
+        <tr>
+          <th v-for="col in columns" :key="col.key">
+            <input
+              type="text"
+              v-model="filterText[col.field]"
+              placeholder="请输入内容进行筛选"
+            />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in computedData" :key="row.id">
+          <td v-for="col in columns" :key="col.key">{{ row[col.field] }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="pagination">
+      <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
+      <span>第 {{ currentPage }} 页 / 共 {{ pageCount }} 页</span>
+      <button :disabled="currentPage === pageCount" @click="nextPage">
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    columns: Array,
+    dataSource: Array,
+  },
+  data() {
+    return {
+      data: [],
+      sortKey: "",
+      sortOrder: "asc",
+      filterText: {},
+      currentPage: 1,
+      pageSize: 10,
+    };
+  },
+  computed: {
+    pageCount() {
+      return Math.ceil(this.data.length / this.pageSize);
+    },
+    computedData() {
+      const startIndex = (this.currentPage - 1) * this.pageSize;
+      const endIndex = startIndex + this.pageSize;
+      return this.data.slice(startIndex, endIndex);
+    },
+  },
+  methods: {
+    sort(col) {
+      const { field } = col;
+      if (this.sortKey === field) {
+        this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
+      } else {
+        this.sortKey = field;
+        this.sortOrder = "asc";
+      }
+
+      this.data = this.dataSource.sort((a, b) => {
+        const aValue = a[field];
+        const bValue = b[field];
+        if (aValue < bValue) return this.sortOrder === "asc" ? -1 : 1;
+        if (aValue > bValue) return this.sortOrder === "asc" ? 1 : -1;
+        return 0;
+      });
+    },
+    filter(filterText) {
+      this.data = this.dataSource.filter((row) =>
+        Object.entries(filterText).every(([field, value]) =>
+          String(row[field]).toLowerCase().includes(value.toLowerCase())
+        )
+      );
+    },
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+    nextPage() {
+      if (this.currentPage < this.pageCount) {
+        this.currentPage++;
+      }
+    },
+  },
+  watch: {
+    filterText: {
+      deep: true,
+      handler(newValue) {
+        this.filter(newValue);
+      },
+    },
+    dataSource: {
+      deep: true,
+      handler(newValue) {
+        this.data = newValue;
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+<style>
+.tableHeader {
+  cursor: pointer;
+}
+.pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pagination button {
+  margin: 0 10px;
+}
+</style>

vue/components/demo.vue

@@ -1,16 +1,47 @@
-
 <template>
-	 <div class="demo">this is a {{name}}</div>	
+  <div class="demo">点击表头进行排序，输入文字进行筛选</div>
+  <Table :columns="columns" :data-source="dataSource" />
 </template>
 <style scoped>
-	.demo{
-		color:red
-	}
+.demo {
+  color: red;
+}
 </style>
 <script>
+import Table from "./Table/index.vue";
 export default {
-	data() {
-		name:'Demo'
-	}
-}
+  components: { Table },
+  data() {
+    return {
+      name: "demo",
+      columns: [
+        { title: "姓名", field: "name", key: "1" },
+        { title: "年龄", field: "age", key: "2" },
+        { title: "性别", field: "gender", key: "3" },
+      ],
+      dataSource: [
+        { name: "卢明", age: 22, gender: "男", id: "a1" },
+        { name: "胡丽", age: 28, gender: "女", id: "b2" },
+        { name: "张凤", age: 19, gender: "女", id: "c3" },
+        { name: "李斌", age: 25, gender: "男", id: "d4" },
+        { name: "陈雪", age: 21, gender: "女", id: "e5" },
+        { name: "王新", age: 30, gender: "男", id: "f6" },
+        { name: "赵柳", age: 27, gender: "女", id: "g7" },
+        { name: "孙伟", age: 23, gender: "男", id: "h8" },
+        { name: "吴莉", age: 26, gender: "女", id: "i9" },
+        { name: "郑强", age: 20, gender: "男", id: "j10" },
+        { name: "林婷", age: 24, gender: "女", id: "k11" },
+        { name: "黄勇", age: 31, gender: "男", id: "l12" },
+        { name: "徐琳", age: 29, gender: "女", id: "m13" },
+        { name: "高峰", age: 18, gender: "男", id: "n14" },
+        { name: "罗娜", age: 32, gender: "女", id: "o15" },
+        { name: "周俊", age: 22, gender: "男", id: "p16" },
+        { name: "朱丹", age: 33, gender: "女", id: "q17" },
+        { name: "冯刚", age: 20, gender: "男", id: "r18" },
+        { name: "胡萍", age: 27, gender: "女", id: "s19" },
+        { name: "王波", age: 24, gender: "男", id: "t20" },
+      ],
+    };
+  },
+};
 </script>