按钮样式优化、页码切换修复

src/style/element-plus.scss

@@ -2,8 +2,14 @@
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
 }
-el-text{display: flex;justify-content: center;align-items: center;
-  .el-icon{margin-right: 4px;}}
+el-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-icon {
+    margin-right: 4px;
+  }
+}
 .el-upload {
   input[type="file"] {
     display: none !important;
@@ -42,6 +48,10 @@ el-text{display: flex;justify-content: center;align-items: center;
   margin-left: 2px !important;
 }
 
+.edit-btn {
+  width: 100%;
+}
+
 /* 自定义 popover 的类名 */
 .pure-popper {
   padding: 0 !important;

src/views/Template/template/hook.tsx

@@ -37,7 +37,7 @@ export function useUser() {
     }
   ]);
   // 表格数据列表
-  const dataList = ref([]);
+  const dataList = ref([{ Id: 1 }]);
   // 页面加载状态
   const loading = ref(false);
   // 表格分页选择器
@@ -69,24 +69,29 @@ export function useUser() {
     {
       label: "操作",
       fixed: "right",
-      width: 200,
+      width: 120,
       slot: "operation"
     }
   ];
   // 当前页数量切换
   function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
-    onSearch(ruleFormRef);
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef);
+    }
   }
   // 当前页码切换
   function handleCurrentChange(val: number) {
     console.log(`current page: ${val}`);
-    onSearch(ruleFormRef);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef);
+    }
   }
   // 选择表格项
   function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-    onSearch(ruleFormRef);
+    console.log(`SelectionChange: ${val}`);
+    // selectList.value = val;
   }
   // 搜索列表
   async function onSearch(formEl) {

src/views/Template/template/index.vue

@@ -12,6 +12,8 @@ import Add from "./components/add/index.vue";
 import Edit from "./components/edit/index.vue";
 import Search from "@iconify-icons/ep/search";
 import Addicon from "@iconify-icons/ep/document-add";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
 
 const {
   form,
@@ -95,9 +97,7 @@ provide("closeAddVisible", closeAddVisible);
     PureTableBar(title="后台角色管理", @refresh="onSearch" )
       template(#buttons)
         //- 新增按钮，弹出新增弹窗
-        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd") 新增
-        //- 修改按钮，弹出修改弹窗
-        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleUpdate(row)") 编辑
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd" v-if="hasAuth(['add'])") 新增
       template(v-slot="{ size, checkList }")
         pure-table(stripe 
           border,
@@ -123,25 +123,21 @@ provide("closeAddVisible", closeAddVisible);
                     arrow-down
                 template(#dropdown)
                   el-dropdown-menu
-                    el-dropdown-item
+                    el-dropdown-item(v-if="hasAuth(['edit'])")
                       //- 编辑操作
-                      el-button.reset-margin(
-                        link
+                      el-button.reset-margin.edit-btn(
                         type="primary"
-                        :size="size"
+                        size="small"
                         @click="handleUpdate(row)"
                         :icon="useRenderIcon(EditPen)"
-                        v-if="hasAuth(['edit'])"
                       ) 编辑
-                      //- 删除操作
-                    el-dropdown-item
-                      el-button.reset-margin(
-                        link
+                        //- 删除操作
+                    el-dropdown-item(v-if="hasAuth(['delete'])")
+                      el-button.reset-margin.edit-btn(
                         type="primary"
-                        :size="size"
+                        size="small"
                         @click="handleDelete(row)"
                         :icon="useRenderIcon(Delete)"
-                        v-if="hasAuth(['delete'])"
                       ) 删除
   //- 新增页面组件
   Add(:addVisible="addVisible")