table分页事件方法修改

src/components/Table/VbDataTable.vue

@@ -130,11 +130,11 @@ const pageChange = (page: number) => {
   emits("update:currentPage", page)
   emits("page-change", page)
   currentPage.value = page
-  remote()
+  search()
 }
 const onSort = (sort: Sort) => {
   emits("on-sort", sort)
-  remote()
+  search()
 }
 const onSelectAll = (isChecked: boolean, rows: Array<any>) => {
   emits("on-items-all-change", isChecked, rows)

src/views/server/sysRole.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from "vue"
+import { ref, computed, onMounted } from "vue"
 import type { Header } from "@/components/Table/table-partials/models"
 import Rs from "@/core/services/RequestService"
 import type { VbFormItem } from "@/components/Forms/models"
@@ -11,7 +11,6 @@ const modal = ref()
 const name = ref<string>("")
 const size = ref<any>("default")
 const table = ref()
-const queryParams = ref({ name: "" })
 const cols = ref<Array<Header>>([
   {
     name: "角色名",
@@ -29,7 +28,7 @@ const cols = ref<Array<Header>>([
     minWidth: 300,
   },
 ])
-const formData = ref<any>({})
+const formData = ref<any>({ menuIds: [] })
 
 //定义需要操作的类型
 const opreationType = ref<"A" | "U" | "D" | "BU">("A")
@@ -70,11 +69,9 @@ const items: Array<VbFormItem> = [
     },
   },
 ]
-const query = () => {
-  queryParams.value = {
-    name: name.value,
-  }
-}
+
+const result = ref<Array<any>>([])
+
 const add = () => {
   opreationType.value = "A"
   formData.value = Object.assign({}, { name: "", nameZh: "", menuIds: [] })
@@ -97,11 +94,12 @@ function combineIds(nodes?: any): Array<any> {
 }
 function edit(row: any) {
   opreationType.value = "U"
+
   Rs.post("auth/menus/findMenuByRoleID", { data: row.id + "", successAlert: false }).then((res: any) => {
     if (res) {
       const mIds = combineIds(res.data)
-      console.log(mIds)
-      formData.value = Object.assign({}, { menuIds: combineIds(res.data), isChangMenuIds: true }, { ...row })
+      console.log("mIds", mIds)
+      formData.value = Object.assign({}, { menuIds: mIds, isChangMenuIds: true }, { ...row })
       console.log("formData.value", formData.value)
       modal.value.show()
     }
@@ -121,15 +119,40 @@ function del(row: any) {
     })
   })
 }
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+const loadData = () => {
+  Rs.post("/auth/roles/getAll", {
+    data: { currentPage: currentPage.value, desc: "", isPage: true, name: name.value, pageSize: pageSize.value },
+  }).then((res: any) => {
+    result.value = res.data
+    total.value = res.total
+  })
+}
+const pageChange = (v: number) => {
+  currentPage.value = v
+  loadData()
+}
+const perPageChange = (v: number) => {
+  pageSize.value = v
+  currentPage.value = 1
+  loadData()
+}
+onMounted(loadData)
 </script>
 <template>
   <VbDataTable
     ref="table"
     :header="cols"
-    url="auth/roles/getAllRoles"
-    method="post"
-    :query-params="queryParams"
+    :data="result"
+    :total="total"
+    :currentPage="currentPage"
     :has-checkbox="false"
+    @page-change="pageChange"
+    @on-items-per-page-change="perPageChange"
+    :autoSearch="false"
   >
     <template v-slot:table-tool>
       <el-form class="align-items-center" :inline="true">
@@ -139,7 +162,7 @@ function del(row: any) {
               <el-input class="w-100" v-model="name" placeholder="请输入角色名称" :size="size" />
             </el-form-item>
             <el-form-item class="mb-0 me-0 align-items-center">
-              <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">
+              <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="loadData">
                 <i class="fa-solid fa-magnifying-glass"></i>
                 查询
               </el-button>

tsconfig.config.json

@@ -8,6 +8,7 @@
   ],
   "compilerOptions": {
     "composite": true,
+    "ignoreDeprecations": "5.0",
     "types": [
       "node"
     ]