补充拦截器，使用apifox模拟数据

package.json

@@ -6,7 +6,8 @@
     "dev": "vite",
     "preview": "vite preview",
     "build": "vite build",
-    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
+    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
+    "test": "rm -rf dist && echo 'del success' "
   },
   "dependencies": {
     "@types/lodash": "^4.14.195",

src/components/my-table.vue

@@ -27,7 +27,7 @@ import type {isShowType} from '../types/my-table.d'
   })
   console.log(props,'props');
 
-  const emits = defineEmits(['selectChange','pagination'])
+  const emits = defineEmits(['selectChange','paginationFn'])
 
   // const pageSize = ref(props.limit)
   // const currentPage = ref(props.pageNum) 
@@ -58,11 +58,11 @@ import type {isShowType} from '../types/my-table.d'
   }
   const currentChange = (val:number) => {
     // currentPage.value = val
-    emits('pagination',{pageNum:val,pageSize:pageSize.value})
+    emits('paginationFn',{pageNum:val,pageSize:pageSize.value})
   }
   const sizeChange = (val:number) => {
     // pageSize.value = val
-    emits('pagination',{pageSize:val,pageNum:currentPage.value})
+    emits('paginationFn',{pageSize:val,pageNum:currentPage.value})
   }
 
 </script>
@@ -99,7 +99,12 @@ import type {isShowType} from '../types/my-table.d'
 
         </template>
       </el-table-column>
+
+      <template #empty>
+        <el-empty description="暂无数据" />
+      </template>
     </el-table>
+
     <div class="pagination">
       <el-pagination
         :current-page="currentPage"

src/demo/index.vue

@@ -1,6 +1,28 @@
 <script setup lang='ts'>
 import router from '@/router';
 
+const obj = reactive({
+  name: 'zhangsan',
+  age: 18
+})
+
+const titles = ref(['标题1', '标题2', '标题3', '标题4', '标题5', '标题6', '标题7', '标题8', '标题9'],)  // 标题数组
+const maxTitlesToShow = ref(4) // 最多显示的标题数量
+
+const truncatedTitles = computed(() => {
+  // return titles.value.slice(0, maxTitlesToShow.value)
+  if (titles.value.length <= maxTitlesToShow.value) {
+        return titles.value;
+      } else {
+        return titles.value.slice(0, maxTitlesToShow.value);
+      }
+})
+
+const showEllipsis = computed(() => {
+  return titles.value.length > maxTitlesToShow.value;
+})
+
+
 </script>
 
 <template>
@@ -13,6 +35,18 @@ import router from '@/router';
       <el-button type="success" @click="router.push('/diretive')">directiveDemo</el-button>
       <el-button type="success" @click="router.push('/my-table')">myTableDemo</el-button>
 
+      <div class="my-log">
+        <img src="src/assets/logo-vue.svg" alt="">
+      </div>
+
+      <div v-for="(value,key) in obj">
+        <h1>{{ value }}</h1>
+        <h2>{{key}}</h2>
+      </div>
+
+      <div v-for="(title, index) in truncatedTitles" :key="index" class="title">{{ title }}</div>
+      <div v-if="showEllipsis" class="title">...</div>
+
       <RouterView />
     </main>
   </div>
@@ -31,6 +65,11 @@ import router from '@/router';
     width: 100vw;
     padding-top: 20px;
 
+    .my-log {
+      width: 200px;
+      height: 200px;
+      margin: 20px 0;
+    }
   }
 }
 </style>

src/demo/my-table-demo.vue

@@ -1,75 +1,95 @@
 <script setup lang='ts'>
-  interface tableDataType {
-    id:number,
-    name:string,
-    description:string,
-    is_use:string
-  }
-  const isShow = reactive({sortShow: true,selectionShow: true,detailShow: true})
-  const currentPage = ref(1)
-  const limit = ref(2)
-  const tableHeader = ref([
-        { label: '编号', key: 'id', width:'70px' },
-        { label: '姓名', key: 'name', width:'150px', slotName:'slotName' },
-        { label: '性别', key: 'sex', width:'150px', slotName: 'slotSex' },
-        { label: '权限描述', key: 'description', slotName:'slotDes' },
-  ])
-  const tableData = ref([
-        {
-          "id":221,
-          "name": "西药开立权限",
-          "sex": "1",
-          "description": "医生对西药处方权限",
-          "is_use":"0",
-        },
-        {
-          "id":222,
-          "name": "草药开立权限",
-          "sex": "0",
-          "description": "医生对草药处方权限",
-          "is_use":"0",
-        },
-        {
-          "id":223,
-          "name": "成药开立权限",
-          "sex": "1",
-          "description": "医生对成药处方权限",
-          "is_use":"0"
-        }, 
-        {
-          "id":224,
-          "name": "麻醉开立权限",
-          "sex": "0",
-          "description": "医生对麻醉处方权限",
-          "is_use":"0"
-        },
-        {
-          "id":225,
-          "name": "精一开立权限",
-          "sex": "1",
-          "description": "医生对精一处方权限",
-          "is_use":"0"
-        }
-  ])
-  const selectChange = (val: tableDataType) => {
-    console.log(val,'selectChange');
-  }
-  const rowInfo = (data: tableDataType) => {
-    console.log(data,'rowInfo');
-  }
-  const copyData = [...tableData.value]
-  // 获取最新页码，重新请求数据
-  const getList = (val:{pageSize:number,pageNum:number}) => {
-    const {pageSize,pageNum} = val
-    limit.value = pageSize
-    currentPage.value = pageNum
-    console.log(val,'getlist');
-    tableData.value = copyData.slice((pageNum-1) * pageSize, pageNum * pageSize)
-  }
-  const changeStatus =(rowInfo: tableDataType) => {
-    console.log(rowInfo,'changeStatus');
-    
-  }
+import commonApi from '@/service/api'
+import type { pagenationType, tableDataType } from '@/types/my-table.d'
+
+const isShow = reactive({sortShow: true,selectionShow: true,detailShow: true})
+const currentPage = ref(1)
+const limit = ref(2)
+const tableHeader = ref([
+      { label: '编号', key: 'id', width:'70px' },
+      { label: '姓名', key: 'name', width:'150px', slotName:'slotName' },
+      { label: '性别', key: 'sex', width:'150px', slotName: 'slotSex' },
+      { label: '权限描述', key: 'description', slotName:'slotDes' },
+])
+// const tableData = ref([
+//       {
+//         "id":221,
+//         "name": "西药开立权限",
+//         "sex": "1",
+//         "description": "医生对西药处方权限",
+//         "is_use":"0",
+//       },
+//       {
+//         "id":222,
+//         "name": "草药开立权限",
+//         "sex": "0",
+//         "description": "医生对草药处方权限",
+//         "is_use":"0",
+//       },
+//       {
+//         "id":223,
+//         "name": "成药开立权限",
+//         "sex": "1",
+//         "description": "医生对成药处方权限",
+//         "is_use":"0"
+//       }, 
+//       {
+//         "id":224,
+//         "name": "麻醉开立权限",
+//         "sex": "0",
+//         "description": "医生对麻醉处方权限",
+//         "is_use":"0"
+//       },
+//       {
+//         "id":225,
+//         "name": "精一开立权限",
+//         "sex": "1",
+//         "description": "医生对精一处方权限",
+//         "is_use":"0"
+//       }
+// ])
+const tableData = ref<Array<tableDataType>>([])
+const selectChange = (val: tableDataType) => {
+  console.log(val,'selectChange');
+}
+const detailRow = (data: tableDataType) => {
+  console.log(data,'detailRow');
+}
+const delRow = (data: tableDataType) => {
+  console.log(data,'delRow');
+}
+let total = ref(0)
+// 获取最新页码，重新请求数据
+const getListFn = async (val:pagenationType) => {
+  limit.value = val.pageSize
+  currentPage.value = val.pageNum
+  const res = await commonApi.getList(val) as { list: Array<tableDataType>, total: number }
+  
+  // 返回数据格式
+  // "data": {
+  //     "list": [
+  //         {
+  //             "id": "540000197902259888",
+  //             "name": "萧杰",
+  //             "sex": 0,
+  //             "description": "先上重备样引设那机正理装收一及长低权。",
+  //             "is_use": false
+  //         },
+  //     ],
+  //     "total": "150"
+  // }
+
+
+  tableData.value = res.list
+  total.value = Number(res.total)
+}
+onMounted(() => {
+  getListFn({pageSize:limit.value,pageNum:currentPage.value})
+})
+const changeStatus =(rowInfo: tableDataType) => {
+  console.log(rowInfo,'changeStatus');
+}
+
 
 </script>
 
@@ -84,15 +104,12 @@
         :pageNum="currentPage"
         :limit="limit"
         :pageSizes="[1,2,3,4]"
-        :dataTotal="tableData.length"
+        :dataTotal="total"
         @selectChange="selectChange"
-        @pagination="getList"
+        @paginationFn="getListFn"
       >
       <!-- 自定义插槽列 -->
       <template #columnSlot="{scope}">
-        <span v-if="!(scope.column.property === 'sex')">
-          {{scope.row[scope.column.property]}}
-        </span>
         <el-switch
           v-model="scope.row.is_use"
           v-if="scope.column.property === 'description'"
@@ -101,6 +118,10 @@
           @change="changeStatus(scope.row)"
           >
         </el-switch>
+        <span class="column-text" v-if="!(scope.column.property === 'sex')">
+          {{scope.row[scope.column.property]}}
+        </span>
+
 
         <span v-if="scope.column.property === 'sex'">
           {{ scope.row[scope.column.property] === '1' ? '男' : '女'  }}
@@ -110,8 +131,8 @@
 
       <!-- 操作列：详情、删除等功能 -->
       <template #operation="{scope}">
-          <el-link :underline="false" type="primary" style="padding-right: 20px;"  @click="rowInfo(scope.row)">详情</el-link>
-          <el-link :underline="false" type="danger"  @click="rowInfo(scope.row)">删除</el-link>
+          <el-link class="opreate" :underline="false"  type="primary" @click="detailRow(scope.row)">详情</el-link>
+          <el-link class="opreate" :underline="false" type="danger" @click="delRow(scope.row)">删除</el-link>
       </template>
 
       </my-table>
@@ -131,6 +152,13 @@
     width: 1000px;
     border: 1px solid red;
     padding-bottom: 50px;
+    .column-text {
+      margin-left: 20px;
+    }
+    .opreate {
+      font-size: 12px;
+      padding-right: 20px;
+    }
   }
 
 </style>

src/demo/my-table.d.ts

@@ -0,0 +1,12 @@
+export interface tableDataType {
+    id:number,
+    name:string,
+    description:string,
+    is_use:number,
+    sex: number
+  }
+
+export interface pagenationType {
+    pageSize: number,
+    pageNum: number,
+}

src/service/api.ts

@@ -0,0 +1,6 @@
+import { httpReq } from "@/service/request";
+
+const commonApi = {
+    getList:(params?: any) => httpReq.get("/list", {params})
+}
+export default commonApi;

src/service/interceptors.ts

@@ -1,3 +1,34 @@
-import service from "@/service/axios";
-import type { AxiosError,AxiosRequestConfig,AxiosResponse } from "axios";
+import axios from 'axios';
+import type { AxiosError,AxiosResponse,InternalAxiosRequestConfig,AxiosInstance } from "axios";
 
+
+const service:AxiosInstance = axios.create({
+    // baseURL: 'http://localhost:4523',
+    baseURL: 'http://127.0.0.1:4523/m1/2897880-0-default',
+    timeout: 5000
+});
+
+var loadingInstance:any = null;
+
+service.interceptors.request.use((config:InternalAxiosRequestConfig) => {
+    loadingInstance = ElLoading.service({ fullscreen: true });
+    return config;
+},(error:AxiosError) => {
+    return Promise.reject(error);
+});
+
+service.interceptors.response.use((response:AxiosResponse) => {
+    loadingInstance.close();
+    const {data,message,code} = response.data;
+    if(code === 0){
+        return data
+    } else {
+        ElMessage.error(message);
+        return Promise.reject(message);
+    }
+},(error:any) => {
+    loadingInstance.close();
+    return Promise.reject(error);
+});
+
+export default service;