devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）_vue3+django

作者：不正经 | 2024-02-19 08:20:53

赞

踩

vue3+django

目录

一、查询公告信息表中的数据，并绑定到表格中

1. 后端接口（http://127.0.0.1:8000/notices） 

2. utils/api.ts中增加如下函数，用于调用后端接口查询所有公告信息

3. views文件夹中新建一个NoticesManagement.vue文件

二、实现分页

1. 后端接口（http://127.0.0.1:8000/notices/1/2） 

2. utils/api.ts中增加函数，用于调用后端接口根据页码查询公告信息

3.  修改NoticesManagement.vue文件

三、删除

1. 后端接口（http://127.0.0.1:8000/delete_notice/1） 

2. utils/api.ts中增加函数，用于调用后端接口根据公告id删除公告信息

3.  修改NoticesManagement.vue文件

四、新增公告 

1. 后端接口（http://127.0.0.1:8000/add_notice） 

2. utils/api.ts中增加函数，用于调用后端接口增加公告信息

3.  修改NoticesManagement.vue文件

五、编辑公告 

1. 后端接口（http://127.0.0.1:8000/edit_notice/） 

2. utils/api.ts中增加函数，用于调用后端接口编辑公告信息

3.  修改NoticesManagement.vue文件

六、筛选公告

​编辑​1.  修改NoticesManagement.vue文件

七、多选

1.  修改NoticesManagement.vue文件

八、全选、清除、批量删除 

1.  修改NoticesManagement.vue文件

九、Excel导入导出

1. Excel导入

2. Excel导出

3. 安装依赖包

4.  Excel模板template.xlsx放入public文件夹中

5.   修改NoticesManagement.vue文件

一、查询公告信息表中的数据，并绑定到表格中

1. 后端接口（http://127.0.0.1:8000/notices） 

2. utils/api.ts中增加如下函数，用于调用后端接口查询所有公告信息

  1. // 获得所有公告信息
  2. export function getAllNoticesUrl() {
  3.     return request({
  4.         url: 'api/notices/',
  5.         method: 'get',
  6.     })
  7. }

3. views文件夹中新建一个NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
  4.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  5.     <el-table-column prop="title" label="标题" width="380">
  6.       <template #default="scope" width="300">
  7.         <span>{{ scope.row.title }}</span>
  8.       </template>
  9.     </el-table-column>
  10.     <el-table-column prop="user" label="发布人姓名" width="100">
  11.       <template #default="scope" width="180">
  12.         <span>{{ scope.row.user }}</span>
  13.       </template>
  14.     </el-table-column>
  15.     <el-table-column prop="content" label="内容" width="280">
  16.       <template #default="scope" width="180">
  17.         <span>{{ scope.row.content }}</span>
  18.       </template>
  19.     </el-table-column>
  20.   </el-table>
  21. </template>
  22. <script setup lang="ts">
  23. import { ref, onMounted } from "vue";
  24. import { getAllNoticesUrl } from "../utils/api";
  25. // 声明一个公告类型的接口
  26. interface Notice {
  27.   id: number; // 公告编号
  28.   title: string; // 公告标题
  29.   content: string; // 公告内容
  30.   add_time: string; // 发布时间
  31.   user_id: number; // 用户编号
  32.   user: string; // 用户信息
  33. }
  34. // 公告数据
  35. var tableDataNotices = ref<Notice[]>([]);
  36. // 查询所有的公告并绑定到表格中
  37. const getAllNoticesData = () => {
  38.   getAllNoticesUrl().then((res: any) => {
  39.     console.log(res);
  40.     tableDataNotices.value = res.data;
  41.    
  42.   });
  43. };
  44. // 页面加载后查询所有公告数据
  45. onMounted(() => {
  46.   getAllNoticesData();
  47. });
  48. </script>

二、实现分页

1. 后端接口（http://127.0.0.1:8000/notices/1/2/） 

​

2. utils/api.ts中增加函数，用于调用后端接口根据页码查询公告信息

  1. // 分页
  2. export function getNoticesByPageUrl(params: any) {
  3.     return request({
  4.         url: 'api/notices/' + Number(params['currentPage']) + '/' + Number(params['pageSize']) + '/',
  5.         method: 'get',
  6.     })
  7. }

3.  修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
  4.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  5.     <el-table-column prop="title" label="标题" width="380">
  6.       <template #default="scope" width="300">
  7.         <span>{{ scope.row.title }}</span>
  8.       </template>
  9.     </el-table-column>
  10.     <el-table-column prop="user" label="发布人姓名" width="100">
  11.       <template #default="scope" width="180">
  12.         <span>{{ scope.row.user }}</span>
  13.       </template>
  14.     </el-table-column>
  15.     <el-table-column prop="content" label="内容" width="280">
  16.       <template #default="scope" width="180">
  17.         <span>{{ scope.row.content }}</span>
  18.       </template>
  19.     </el-table-column>
  20.   </el-table>
  21.   <!-- 分页组件 -->
  22.   <el-pagination
  23.     @size-change="handleSizeChange"
  24.     @current-change="handleCurrentChange"
  25.     :current-page="currentPage"
  26.     :page-sizes="pageSizes"
  27.     :page-size="pageSize"
  28.     layout="total, sizes, prev, pager, next, jumper"
  29.     :total="total"
  30.   >
  31.   </el-pagination>
  32. </template>
  33. <script setup lang="ts">
  34. import { ref, onMounted } from "vue";
  35. import { getAllNoticesUrl, getNoticesByPageUrl } from "../utils/api";
  36. // 声明一个公告类型的接口
  37. interface Notice {
  38.   id: number; // 公告编号
  39.   title: string; // 公告标题
  40.   content: string; // 公告内容
  41.   add_time: string; // 发布时间
  42.   user_id: number; // 用户编号
  43.   user: string; // 用户信息
  44. }
  45. // 公告数据
  46. var tableDataNotices = ref<Notice[]>([]);
  47. // 查询所有的公告并绑定到表格中
  48. // const getAllNoticesData = () => {
  49. //   getAllNoticesUrl().then((res: any) => {
  50. //     console.log(res);
  51. //     tableDataNotices.value = res.data;
  52. //     let total = tableDataNotices.value.length; // 修改总页数
  53. //   });
  54. // };
  55.  
  56. // 查询所有的公告并绑定到表格中（分页）
  57. const getAllNoticesData = () => {
  58.   let params = {
  59.     currentPage: currentPage.value,
  60.     pageSize: pageSize.value,
  61.   };
  62.   getNoticesByPageUrl(params).then((res: any) => {
  63.     console.log(res);
  64.     tableDataNotices.value = res.data;
  65.     total.value = res.total; // 修改总页数
  66.   });
  67. };
  68.  
  69. // 页面加载后查询所有公告数据
  70. onMounted(() => {
  71.   getAllNoticesData();
  72. });
  73. // 分页
  74. const pageSizes = [5, 10, 15, 20, 50, 100];
  75. const pageSize = ref(5); // 每页记录条数
  76. const currentPage = ref(1); // 当前页的索引
  77. const small = ref(false);
  78. const background = ref(false);
  79. const disabled = ref(false);
  80. const total = ref(0); // 总页数
  81.  
  82. // 分页
  83. const handleSizeChange = (val: number) => {
  84.   console.log("${val} items per page");
  85.   pageSize.value = val;
  86.   getAllNoticesData();
  87. };
  88.  
  89. const handleCurrentChange = (val: number) => {
  90.   console.log("current page: ${val}");
  91.   currentPage.value = val;
  92.   getAllNoticesData();
  93. };
  94. </script>

三、删除

​

1. 后端接口（http://127.0.0.1:8000/delete_notice/1） 

​

2. utils/api.ts中增加函数，用于调用后端接口根据公告id删除公告信息

  1. // 删除公告
  2. export function deleteNoticeUrl(params:any) {
  3.     return request({
  4.         url: 'api/delete_notice/' + params + "/",
  5.         method: 'delete',
  6.     })
  7. }

3.  修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
  4.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  5.     <el-table-column prop="title" label="标题" width="380">
  6.       <template #default="scope" width="300">
  7.         <span>{{ scope.row.title }}</span>
  8.       </template>
  9.     </el-table-column>
  10.     <el-table-column prop="user" label="发布人姓名" width="100">
  11.       <template #default="scope" width="180">
  12.         <span>{{ scope.row.user }}</span>
  13.       </template>
  14.     </el-table-column>
  15.     <el-table-column prop="content" label="内容" width="280">
  16.       <template #default="scope" width="180">
  17.         <span>{{ scope.row.content }}</span>
  18.       </template>
  19.     </el-table-column>
  20.  
  21.     <el-table-column label="操作" width="300">
  22.                     <template #default="scope">
  23.                         <div>
  24.                             <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="您确定删除吗？"
  25.                                 icon-color="#626AEF" @confirm="handleDelete(scope.row)">
  26.                                 <template #reference>
  27.                                     <el-button>删除</el-button>
  28.                                 </template>
  29.                             </el-popconfirm>                           
  30.                         </div>
  31.                     </template>
  32.                 </el-table-column>
  33.   </el-table>
  34.   <!-- 分页组件 -->
  35.   <el-pagination
  36.     @size-change="handleSizeChange"
  37.     @current-change="handleCurrentChange"
  38.     :current-page="currentPage"
  39.     :page-sizes="pageSizes"
  40.     :page-size="pageSize"
  41.     layout="total, sizes, prev, pager, next, jumper"
  42.     :total="total"
  43.   >
  44.   </el-pagination>
  45. </template>
  46. <script setup lang="ts">
  47. import { ref, onMounted } from "vue";
  48. import { getAllNoticesUrl, getNoticesByPageUrl, deleteNoticeUrl } from "../utils/api";
  49. // 声明一个公告类型的接口
  50. interface Notice {
  51.   id: number; // 公告编号
  52.   title: string; // 公告标题
  53.   content: string; // 公告内容
  54.   add_time: string; // 发布时间
  55.   user_id: number; // 用户编号
  56.   user: string; // 用户信息
  57. }
  58. // 公告数据
  59. var tableDataNotices = ref<Notice[]>([]);
  60. // 查询所有的公告并绑定到表格中
  61. // const getAllNoticesData = () => {
  62. //   getAllNoticesUrl().then((res: any) => {
  63. //     console.log(res);
  64. //     tableDataNotices.value = res.data;
  65. //     let total = tableDataNotices.value.length; // 修改总页数
  66. //   });
  67. // };
  68.  
  69. // 查询所有的公告并绑定到表格中（分页）
  70. const getAllNoticesData = () => {
  71.   let params = {
  72.     currentPage: currentPage.value,
  73.     pageSize: pageSize.value,
  74.   };
  75.   getNoticesByPageUrl(params).then((res: any) => {
  76.     console.log(res);
  77.     tableDataNotices.value = res.data;
  78.     total.value = res.total; // 修改总页数
  79.   });
  80. };
  81.  
  82. // 页面加载后查询所有公告数据
  83. onMounted(() => {
  84.   getAllNoticesData();
  85. });
  86. // 分页
  87. const pageSizes = [5, 10, 15, 20, 50, 100];
  88. const pageSize = ref(5); // 每页记录条数
  89. const currentPage = ref(1); // 当前页的索引
  90. const small = ref(false);
  91. const background = ref(false);
  92. const disabled = ref(false);
  93. const total = ref(0); // 总页数
  94.  
  95. // 分页
  96. const handleSizeChange = (val: number) => {
  97.   console.log("${val} items per page");
  98.   pageSize.value = val;
  99.   getAllNoticesData();
  100. };
  101.  
  102. const handleCurrentChange = (val: number) => {
  103.   console.log("current page: ${val}");
  104.   currentPage.value = val;
  105.   getAllNoticesData();
  106. };
  107.  
  108. //删除
  109. const handleDelete = (row: Notice) => {
  110.     let params = row.id;
  111.     deleteNoticeUrl(params).then((res) => {
  112.         console.log(res.data.meta);
  113.         getAllNoticesData();
  114.     });
  115. };
  116.  
  117. /*
  118. const handleDelete = (index: number, row: Notice) => {
  119.   let params = row.id;
  120.   deleteNotice(params);
  121. };
  123. const deleteNotice = async (params: any) => {
  124.   try {
  125.     const response = await deleteNoticeUrl(params);
  126.     console.log(response.data.meta);
  127.     getAllNoticesData();
  128.   } catch (error) {
  129.     console.error(error);
  130.   }
  131. };
  132. */
  133. </script>

4. 添加删除对话框

  1.  <el-popconfirm
  2.     confirm-button-text="是"
  3.     cancel-button-text="否"
  4.     :icon="InfoFilled"
  5.     icon-color="#626AEF"
  6.     title="您确定要删除吗?"
  7.     @confirm="handleDelete(scope.$index, scope.row)"
  8.     @cancel="cancelEvent"
  9. >
  10.     <template #reference>
  11.             <el-button>Delete</el-button>
  12.     </template>
  13. </el-popconfirm>
  1. <script lang="ts" setup>
  2.     ……
  3.     import { InfoFilled } from '@element-plus/icons-vue'
  4.     const cancelEvent = () => {
  5.       console.log('cancel!')
  6.     }
  7. </script>

四、新增公告 

​

 ​

1. 后端接口（http://127.0.0.1:8000/add_notice） 

  1. {
  2.     "title": "会议通知",
  3.     "content": "今天上午10：00，会议室开会，地点信息楼210",
  4.     "user_id":"11"
  5. }

​

2. utils/api.ts中增加函数，用于调用后端接口增加公告信息

  1. // 新增公告
  2. export function addNoticeUrl(data:any) {
  3.     return request({
  4.         url: 'api/add_notice/',
  5.         method: 'post',
  6.         data: data,
  7.     })
  8. }

3.  修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-row :gutter="20">
  4. 		<el-col :span="4">
  5. 			<template #default="scope">
  6. 				<el-button text :icon="Edit" @click="handleAdd()" v-permiss="15">
  7. 					新增
  8. 				</el-button>
  9. 			</template>
  10. 		</el-col>
  11. 	</el-row>
  12.   <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
  13.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  14.     <el-table-column prop="title" label="标题" width="380">
  15.       <template #default="scope" width="300">
  16.         <span>{{ scope.row.title }}</span>
  17.       </template>
  18.     </el-table-column>
  19.     <el-table-column prop="user" label="发布人姓名" width="100">
  20.       <template #default="scope" width="180">
  21.         <span>{{ scope.row.user }}</span>
  22.       </template>
  23.     </el-table-column>
  24.     <el-table-column prop="content" label="内容" width="280">
  25.       <template #default="scope" width="180">
  26.         <span>{{ scope.row.content }}</span>
  27.       </template>
  28.     </el-table-column>
  29.  
  30.     <el-table-column label="操作" width="300">
  31.                     <template #default="scope">
  32.                         <div>
  33.                             <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="您确定删除吗？"
  34.                                 icon-color="#626AEF" @confirm="handleDelete(scope.row)">
  35.                                 <template #reference>
  36.                                     <el-button>删除</el-button>
  37.                                 </template>
  38.                             </el-popconfirm>                           
  39.                         </div>
  40.                     </template>
  41.                 </el-table-column>
  42.   </el-table>
  43.   <!-- 分页组件 -->
  44.   <el-pagination
  45.     @size-change="handleSizeChange"
  46.     @current-change="handleCurrentChange"
  47.     :current-page="currentPage"
  48.     :page-sizes="pageSizes"
  49.     :page-size="pageSize"
  50.     layout="total, sizes, prev, pager, next, jumper"
  51.     :total="total"
  52.   >
  53.   </el-pagination>
  54.  
  55.   <!-- 新增对话框 -->
  56. 	<el-dialog title="新增" v-model="addVisible" width="30%">
  57. 		<el-form label-width="70px">
  58. 			<el-form-item label="标题">
  59. 				<el-input v-model="noticeForm.title"></el-input>
  60. 			</el-form-item>
  61. 			<el-form-item label="公告">
  62. 				<el-input v-model="noticeForm.content"></el-input>
  63. 			</el-form-item>		
  64. 		</el-form>
  65. 		<template #footer>
  66. 			<span class="dialog-footer">
  67. 				<el-button @click="addVisible = false">取 消</el-button>
  68. 				<el-button type="primary" @click="saveAdd">确 定</el-button>
  69. 			</span>
  70. 		</template>
  71. 	</el-dialog>
  72. </template>
  73. <script setup lang="ts">
  74. import { ref, onMounted, reactive } from "vue";
  75. import { getAllNoticesUrl, getNoticesByPageUrl, deleteNoticeUrl, addNoticeUrl } from "../utils/api";
  76. import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
  77. // 声明一个公告类型的接口
  78. interface Notice {
  79.   id: number; // 公告编号
  80.   title: string; // 公告标题
  81.   content: string; // 公告内容
  82.   add_time: string; // 发布时间
  83.   user_id: number; // 用户编号
  84.   user: string; // 用户信息
  85. }
  86. // 公告数据
  87. var tableDataNotices = ref<Notice[]>([]);
  88. // 查询所有的公告并绑定到表格中
  89. // const getAllNoticesData = () => {
  90. //   getAllNoticesUrl().then((res: any) => {
  91. //     console.log(res);
  92. //     tableDataNotices.value = res.data;
  93. //     let total = tableDataNotices.value.length; // 修改总页数
  94. //   });
  95. // };
  96.  
  97. // 查询所有的公告并绑定到表格中（分页）
  98. const getAllNoticesData = () => {
  99.   let params = {
  100.     currentPage: currentPage.value,
  101.     pageSize: pageSize.value,
  102.   };
  103.   getNoticesByPageUrl(params).then((res: any) => {
  104.     console.log(res);
  105.     tableDataNotices.value = res.data;
  106.     total.value = res.total; // 修改总页数
  107.   });
  108. };
  109.  
  110. // 页面加载后查询所有公告数据
  111. onMounted(() => {
  112.   getAllNoticesData();
  113. });
  114. // 分页
  115. const pageSizes = [5, 10, 15, 20, 50, 100];
  116. const pageSize = ref(5); // 每页记录条数
  117. const currentPage = ref(1); // 当前页的索引
  118. const small = ref(false);
  119. const background = ref(false);
  120. const disabled = ref(false);
  121. const total = ref(0); // 总页数
  122.  
  123. // 分页
  124. const handleSizeChange = (val: number) => {
  125.   console.log("${val} items per page");
  126.   pageSize.value = val;
  127.   getAllNoticesData();
  128. };
  129.  
  130. const handleCurrentChange = (val: number) => {
  131.   console.log("current page: ${val}");
  132.   currentPage.value = val;
  133.   getAllNoticesData();
  134. };
  135.  
  136. //删除
  137. const handleDelete = (row: Notice) => {
  138.     let params = row.id;
  139.     deleteNoticeUrl(params).then((res) => {
  140.         console.log(res.data.meta);
  141.         getAllNoticesData();
  142.     });
  143. };
  144.  
  145. // 新增公告
  146. const addVisible = ref(false);  // 是否显示新增公告对话框
  147.  
  148. let noticeForm = reactive({
  149. 	title: "",      // 公告标题
  150. 	content: "",    // 公告内容
  151. });
  152.  
  153. const handleAdd = () => {
  154. 	noticeForm.title = ''
  155. 	noticeForm.content = ''
  156. 	addVisible.value = true;
  157. };
  158.  
  159. const saveAdd = async () => {
  160.   try {
  161.     let data = {
  162.       title: noticeForm.title,
  163.       content: noticeForm.content,
  164.       user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  165.     };  
  166.     const res = await addNoticeUrl(data);
  167.     console.log(res.data);
  168.     dialogFormVisible.value = false;
  169.     getAllNoticesData();
  170.   } catch (error) {
  171.     console.error(error);
  172.   }
  173. };
  174.  
  175. // const saveAdd = () => {
  176. //   dialogFormVisible.value = false;
  177. //   let data = {
  178. //     title: noticeForm.title,
  179. //     content: noticeForm.content,
  180. //     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  181. //   };
  182. //   console.log(data);
  183. //   addNoticeUrl(data).then((res) => {
  184. //     console.log(res.data);
  185. //     dialogFormVisible.value = false;
  186. //     getAllNoticesData();
  187. //   });
  188. // };
  189. </script>

五、编辑公告 

​

​

​

1. 后端接口（http://127.0.0.1:8000/edit_notice/） 

  1. {
  2.     "id":19,
  3.     "title": "会议通知",
  4.     "content": "abcccccc"
  5. }

​

2. utils/api.ts中增加函数，用于调用后端接口编辑公告信息

  1. // 编辑公告
  2. export function editNoticeUrl(data:any) {
  3.     return request({
  4.         url: 'api/edit_notice/',
  5.         method: 'put',
  6.         data: data,
  7.     })
  8. }

3.  修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-row :gutter="20">
  4.     <el-col :span="4">
  5.       <template #default="scope">
  6.         <el-button
  7.           text
  8.           :icon="Edit"
  9.           @click="handleAdd(scope.$index, scope.row)"
  10.           v-permiss="15"
  11.         >
  12.           新增
  13.         </el-button>
  14.       </template>
  15.     </el-col>
  16.   </el-row>
  17.   <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
  18.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  19.     <el-table-column prop="title" label="标题" width="380">
  20.       <template #default="scope" width="300">
  21.         <span>{{ scope.row.title }}</span>
  22.       </template>
  23.     </el-table-column>
  24.     <el-table-column prop="user" label="发布人姓名" width="100">
  25.       <template #default="scope" width="180">
  26.         <span>{{ scope.row.user }}</span>
  27.       </template>
  28.     </el-table-column>
  29.     <el-table-column prop="content" label="内容" width="280">
  30.       <template #default="scope" width="180">
  31.         <span>{{ scope.row.content }}</span>
  32.       </template>
  33.     </el-table-column>
  34.     <el-table-column label="操作" width="300">
  35.       <template #default="scope">
  36.         <el-button
  37.           text
  38.           :icon="Edit"
  39.           @click="handleEdit(scope.$index, scope.row)"
  40.           v-permiss="15"
  41.         >
  42.           编辑
  43.         </el-button>
  44.         <el-popconfirm
  45.           confirm-button-text="是"
  46.           cancel-button-text="否"
  47.           title="您确定删除吗？"
  48.           icon-color="#626AEF"
  49.           @confirm="handleDelete(scope.row)">
  50.           <template #reference>
  51.             <el-button>删除</el-button>
  52.           </template>
  53.         </el-popconfirm>
  54.       </template>
  55.     </el-table-column>
  56.   </el-table>
  57.   <!-- 分页组件 -->
  58.   <el-pagination
  59.     @size-change="handleSizeChange"
  60.     @current-change="handleCurrentChange"
  61.     :current-page="currentPage"
  62.     :page-sizes="pageSizes"
  63.     :page-size="pageSize"
  64.     layout="total, sizes, prev, pager, next, jumper"
  65.     :total="total"
  66.   >
  67.   </el-pagination>
  68.  
  69.   <!-- 新增对话框 -->
  70.   <el-dialog title="新增" v-model="addVisible" width="30%">
  71.     <el-form label-width="70px">
  72.       <el-form-item label="标题">
  73.         <el-input v-model="noticeForm.title"></el-input>
  74.       </el-form-item>
  75.       <el-form-item label="公告">
  76.         <el-input v-model="noticeForm.content"></el-input>
  77.       </el-form-item>
  78.     </el-form>
  79.     <template #footer>
  80.       <span class="dialog-footer">
  81.         <el-button @click="addVisible = false">取 消</el-button>
  82.         <el-button type="primary" @click="saveAdd">确 定</el-button>
  83.       </span>
  84.     </template>
  85.   </el-dialog>
  86.  
  87.   <!-- 编辑弹出框 -->
  88.   <el-dialog title="编辑" v-model="editVisible" width="30%">
  89.     <el-form label-width="70px">
  90.       <el-form-item label="编号" v-if="false">
  91.         <el-input v-model="noticeForm.id"></el-input>
  92.       </el-form-item>
  93.       <el-form-item label="标题">
  94.         <el-input v-model="noticeForm.title"></el-input>
  95.       </el-form-item>
  96.       <el-form-item label="内容">
  97.         <el-input v-model="noticeForm.content"></el-input>
  98.       </el-form-item>
  99.     </el-form>
  100.     <template #footer>
  101.       <span class="dialog-footer">
  102.         <el-button @click="editVisible = false">取 消</el-button>
  103.         <el-button type="primary" @click="saveEdit">确 定</el-button>
  104.       </span>
  105.     </template>
  106.   </el-dialog>
  107. </template>
  108. <script setup lang="ts">
  109. import { ref, onMounted, reactive } from "vue";
  110. import {
  111.   getAllNoticesUrl,
  112.   getNoticesByPageUrl,
  113.   deleteNoticeUrl,
  114.   addNoticeUrl,
  115.   editNoticeUrl,
  116. } from "../utils/api";
  117. import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
  118. import { ElMessage, ElMessageBox } from "element-plus";
  119.  
  120. // 声明一个公告类型的接口
  121. interface Notice {
  122.   id: number; // 公告编号
  123.   title: string; // 公告标题
  124.   content: string; // 公告内容
  125.   add_time: string; // 发布时间
  126.   user_id: number; // 用户编号
  127.   user: string; // 用户信息
  128. }
  129. // 公告数据
  130. var tableDataNotices = ref<Notice[]>([]);
  131. // 查询所有的公告并绑定到表格中
  132. // const getAllNoticesData = () => {
  133. //   getAllNoticesUrl().then((res: any) => {
  134. //     console.log(res);
  135. //     tableDataNotices.value = res.data;
  136. //     let total = tableDataNotices.value.length; // 修改总页数
  137. //   });
  138. // };
  139.  
  140. // 查询所有的公告并绑定到表格中（分页）
  141. const getAllNoticesData = () => {
  142.   let params = {
  143.     currentPage: currentPage.value,
  144.     pageSize: pageSize.value,
  145.   };
  146.   getNoticesByPageUrl(params).then((res: any) => {
  147.     console.log(res);
  148.     tableDataNotices.value = res.data;
  149.     total.value = res.total; // 修改总页数
  150.   });
  151. };
  152.  
  153. // 页面加载后查询所有公告数据
  154. onMounted(() => {
  155.   getAllNoticesData();
  156. });
  157. // 分页
  158. const pageSizes = [5, 10, 15, 20, 50, 100];
  159. const pageSize = ref(5); // 每页记录条数
  160. const currentPage = ref(1); // 当前页的索引
  161. const small = ref(false);
  162. const background = ref(false);
  163. const disabled = ref(false);
  164. const total = ref(0); // 总页数
  165.  
  166. // 分页
  167. const handleSizeChange = (val: number) => {
  168.   console.log("${val} items per page");
  169.   pageSize.value = val;
  170.   getAllNoticesData();
  171. };
  172.  
  173. const handleCurrentChange = (val: number) => {
  174.   console.log("current page: ${val}");
  175.   currentPage.value = val;
  176.   getAllNoticesData();
  177. };
  178.  
  179. //删除
  180. const handleDelete = (row: Notice) => {
  181.   let params = row.id;
  182.   deleteNoticeUrl(params).then((res) => {
  183.     console.log(res.data.meta);
  184.     getAllNoticesData();
  185.   });
  186. };
  187.  
  188. // 新增公告
  189. const addVisible = ref(false); // 是否显示新增公告对话框
  190.  
  191. let noticeForm = reactive({
  192.   id: 0,
  193.   title: "", // 公告标题
  194.   content: "", // 公告内容
  195. });
  196.  
  197. const handleAdd = (index: number, row: any) => {
  198.   noticeForm.title = "";
  199.   noticeForm.content = "";
  200.   addVisible.value = true;
  201. };
  202.  
  203. const saveAdd = () => {
  204.   addVisible.value = false;
  205.   let data = {
  206.     title: noticeForm.title,
  207.     content: noticeForm.content,
  208.     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  209.   };
  210.   console.log(data);
  211.   addNoticeUrl(data).then((res) => {
  212.     console.log(res.data);
  213.     getAllNoticesData();
  214.   });
  215. };
  216.  
  217. // 编辑公告
  218. const editVisible = ref(false);
  219. let idx: number = -1;
  220. const handleEdit = (index: number, row: any) => {
  221.   idx = index;
  222.   noticeForm.id = row.id;
  223.   noticeForm.title = row.title;
  224.   noticeForm.content = row.content;
  225.   editVisible.value = true;
  226. };
  227.  
  228. const saveEdit = async () => {
  229.   try {
  230.     const data = {
  231.       id: noticeForm.id,
  232.       title: noticeForm.title,
  233.       content: noticeForm.content,
  234.     };
  235.     const res = await editNoticeUrl(data);
  236.     console.log(res.data);
  237.     ElMessage.success(`修改第 ${idx + 1} 行成功`);
  238.     editVisible.value = false;
  239.     getAllNoticesData();
  240.   } catch (error) {
  241.     console.error(error);
  242.     // Handle error
  243.   }
  244. };
  245.  
  246. // const saveEdit = () => {
  247. //   editVisible.value = false;
  248. //   ElMessage.success(`修改第 ${idx + 1} 行成功`);
  249.  
  250. //   let data = {
  251. //     id: noticeForm.id,
  252. //     title: noticeForm.title,
  253. //     content: noticeForm.content,
  254. //   };
  255. //   console.log(data);
  256. //   editNoticeUrl(data).then((res) => {
  257. //     console.log(res.data);
  258. //     getAllNoticesData();
  259. //   });
  260. // };
  261. </script>

六、筛选公告

​1.  修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-row :gutter="20">
  4.     <el-col :span="4">
  5.       <template #default="scope">
  6.         <el-button
  7.           text
  8.           :icon="Edit"
  9.           @click="handleAdd(scope.$index, scope.row)"
  10.           v-permiss="15"
  11.         >
  12.           新增
  13.         </el-button>
  14.       </template>
  15.     </el-col>
  16.   </el-row>
  17.   <el-table
  18.     ref="tableNoticeRef"
  19.     :data="
  20.       tableDataNotices.filter(
  21.         (data) =>
  22.           !search ||
  23.           data.title.includes(search) ||
  24.           data.title.toLowerCase().includes(search.toLowerCase())
  25.       )
  26.     "
  27.     style="width: 100%"
  28.     status-icon
  29.   >
  30.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  31.     <el-table-column prop="title" label="标题" width="380">
  32.       <template #default="scope" width="300">
  33.         <span>{{ scope.row.title }}</span>
  34.       </template>
  35.     </el-table-column>
  36.     <el-table-column prop="user" label="发布人姓名" width="100">
  37.       <template #default="scope" width="180">
  38.         <span>{{ scope.row.user }}</span>
  39.       </template>
  40.     </el-table-column>
  41.     <el-table-column prop="content" label="内容" width="280">
  42.       <template #default="scope" width="180">
  43.         <span>{{ scope.row.content }}</span>
  44.       </template>
  45.     </el-table-column>
  46.     <el-table-column label="操作" width="300">
  47.       <template #header>
  48.         <el-input v-model="search" size="small" placeholder="Type to search" />
  49.       </template>
  50.       <template #default="scope">
  51.         <el-button
  52.           text
  53.           :icon="Edit"
  54.           @click="handleEdit(scope.$index, scope.row)"
  55.           v-permiss="15"
  56.         >
  57.           编辑
  58.         </el-button>
  59.         <el-popconfirm
  60.           confirm-button-text="是"
  61.           cancel-button-text="否"
  62.           title="您确定删除吗？"
  63.           icon-color="#626AEF"
  64.           @confirm="handleDelete(scope.row)"
  65.         >
  66.           <template #reference>
  67.             <el-button>删除</el-button>
  68.           </template>
  69.         </el-popconfirm>
  70.       </template>
  71.     </el-table-column>
  72.   </el-table>
  73.   <!-- 分页组件 -->
  74.   <el-pagination
  75.     @size-change="handleSizeChange"
  76.     @current-change="handleCurrentChange"
  77.     :current-page="currentPage"
  78.     :page-sizes="pageSizes"
  79.     :page-size="pageSize"
  80.     layout="total, sizes, prev, pager, next, jumper"
  81.     :total="total"
  82.   >
  83.   </el-pagination>
  84.  
  85.   <!-- 新增对话框 -->
  86.   <el-dialog title="新增" v-model="addVisible" width="30%">
  87.     <el-form label-width="70px">
  88.       <el-form-item label="标题">
  89.         <el-input v-model="noticeForm.title"></el-input>
  90.       </el-form-item>
  91.       <el-form-item label="公告">
  92.         <el-input v-model="noticeForm.content"></el-input>
  93.       </el-form-item>
  94.     </el-form>
  95.     <template #footer>
  96.       <span class="dialog-footer">
  97.         <el-button @click="addVisible = false">取 消</el-button>
  98.         <el-button type="primary" @click="saveAdd">确 定</el-button>
  99.       </span>
  100.     </template>
  101.   </el-dialog>
  102.  
  103.   <!-- 编辑弹出框 -->
  104.   <el-dialog title="编辑" v-model="editVisible" width="30%">
  105.     <el-form label-width="70px">
  106.       <el-form-item label="编号" v-if="false">
  107.         <el-input v-model="noticeForm.id"></el-input>
  108.       </el-form-item>
  109.       <el-form-item label="标题">
  110.         <el-input v-model="noticeForm.title"></el-input>
  111.       </el-form-item>
  112.       <el-form-item label="内容">
  113.         <el-input v-model="noticeForm.content"></el-input>
  114.       </el-form-item>
  115.     </el-form>
  116.     <template #footer>
  117.       <span class="dialog-footer">
  118.         <el-button @click="editVisible = false">取 消</el-button>
  119.         <el-button type="primary" @click="saveEdit">确 定</el-button>
  120.       </span>
  121.     </template>
  122.   </el-dialog>
  123. </template>
  124. <script setup lang="ts">
  125. import { ref, onMounted, reactive } from "vue";
  126. import {
  127.   getAllNoticesUrl,
  128.   getNoticesByPageUrl,
  129.   deleteNoticeUrl,
  130.   addNoticeUrl,
  131.   editNoticeUrl,
  132. } from "../utils/api";
  133. import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
  134. import { ElMessage, ElMessageBox } from "element-plus";
  135.  
  136. // 声明一个公告类型的接口
  137. interface Notice {
  138.   id: number; // 公告编号
  139.   title: string; // 公告标题
  140.   content: string; // 公告内容
  141.   add_time: string; // 发布时间
  142.   user_id: number; // 用户编号
  143.   user: string; // 用户信息
  144. }
  145. // 公告数据
  146. var tableDataNotices = ref<Notice[]>([]);
  147. // 查询所有的公告并绑定到表格中
  148. // const getAllNoticesData = () => {
  149. //   getAllNoticesUrl().then((res: any) => {
  150. //     console.log(res);
  151. //     tableDataNotices.value = res.data;
  152. //     let total = tableDataNotices.value.length; // 修改总页数
  153. //   });
  154. // };
  155.  
  156. // 查询所有的公告并绑定到表格中（分页）
  157. const getAllNoticesData = () => {
  158.   let params = {
  159.     currentPage: currentPage.value,
  160.     pageSize: pageSize.value,
  161.   };
  162.   getNoticesByPageUrl(params).then((res: any) => {
  163.     console.log(res);
  164.     tableDataNotices.value = res.data;
  165.     total.value = res.total; // 修改总页数
  166.   });
  167. };
  168.  
  169. // 页面加载后查询所有公告数据
  170. onMounted(() => {
  171.   getAllNoticesData();
  172. });
  173. // 分页
  174. const pageSizes = [5, 10, 15, 20, 50, 100];
  175. const pageSize = ref(5); // 每页记录条数
  176. const currentPage = ref(1); // 当前页的索引
  177. const small = ref(false);
  178. const background = ref(false);
  179. const disabled = ref(false);
  180. const total = ref(0); // 总页数
  181.  
  182. // 分页
  183. const handleSizeChange = (val: number) => {
  184.   console.log("${val} items per page");
  185.   pageSize.value = val;
  186.   getAllNoticesData();
  187. };
  188.  
  189. const handleCurrentChange = (val: number) => {
  190.   console.log("current page: ${val}");
  191.   currentPage.value = val;
  192.   getAllNoticesData();
  193. };
  194.  
  195. //删除
  196. const handleDelete = (row: Notice) => {
  197.   let params = row.id;
  198.   deleteNoticeUrl(params).then((res) => {
  199.     console.log(res.data.meta);
  200.     getAllNoticesData();
  201.   });
  202. };
  203.  
  204. // 新增公告
  205. const addVisible = ref(false); // 是否显示新增公告对话框
  206.  
  207. let noticeForm = reactive({
  208.   id: 0,
  209.   title: "", // 公告标题
  210.   content: "", // 公告内容
  211. });
  212.  
  213. const handleAdd = (index: number, row: any) => {
  214.   noticeForm.title = "";
  215.   noticeForm.content = "";
  216.   addVisible.value = true;
  217. };
  218.  
  219. async function saveAdd() {
  220.   try {
  221.     const data = {
  222.       title: noticeForm.title,
  223.       content: noticeForm.content,
  224.       user_id: 1
  225.     }; 
  226.     dialogFormVisible.value = false;
  227.     const res = await addNoticeUrl(data);
  228.     console.log(res.data);
  229.     await getAllNoticesData();
  230.   } catch (error) {
  231.     console.error(error);
  232.   }
  233. }
  234.  
  235. // const saveAdd = () => {
  236. //   addVisible.value = false;
  237. //   let data = {
  238. //     title: noticeForm.title,
  239. //     content: noticeForm.content,
  240. //     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  241. //   };
  242. //   console.log(data);
  243. //   addNoticeUrl(data).then((res) => {
  244. //     console.log(res.data);
  245. //     getAllNoticesData();
  246. //   });
  247. // };
  248.  
  249. // 编辑公告
  250. const editVisible = ref(false);
  251. let idx: number = -1;
  252. const handleEdit = (index: number, row: any) => {
  253.   idx = index;
  254.   noticeForm.id = row.id;
  255.   noticeForm.title = row.title;
  256.   noticeForm.content = row.content;
  257.   editVisible.value = true;
  258. };
  259.  
  260. const saveEdit = () => {
  261.   editVisible.value = false;
  262.   ElMessage.success(`修改第 ${idx + 1} 行成功`);
  263.  
  264.   let data = {
  265.     id: noticeForm.id,
  266.     title: noticeForm.title,
  267.     content: noticeForm.content,
  268.   };
  269.   console.log(data);
  270.   editNoticeUrl(data).then((res) => {
  271.     console.log(res.data);
  272.     getAllNoticesData();
  273.   });
  274. };
  275.  
  276. // 筛选数据
  277. const search = ref("");
  278.  
  279.  
  280. </script>

七、多选

​

1.  修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-row :gutter="20">
  4.     <el-col :span="4">
  5.       <template #default="scope">
  6.         <el-button
  7.           text
  8.           :icon="Edit"
  9.           @click="handleAdd(scope.$index, scope.row)"
  10.           v-permiss="15"
  11.         >
  12.           新增
  13.         </el-button>
  14.       </template>
  15.     </el-col>
  16.   </el-row>
  17.   <el-table
  18.     ref="tableNoticeRef"
  19.     :data="
  20.       tableDataNotices.filter(
  21.         (data) =>
  22.           !search ||
  23.           data.title.includes(search) ||
  24.           data.title.toLowerCase().includes(search.toLowerCase())
  25.       )
  26.     "
  27.     style="width: 100%"
  28.     status-icon
  29.     @selection-change="handleSelectionChange">
  30.     <el-table-column type="selection" width="55" />
  31.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  32.     <el-table-column prop="title" label="标题" width="380">
  33.       <template #default="scope" width="300">
  34.         <span>{{ scope.row.title }}</span>
  35.       </template>
  36.     </el-table-column>
  37.     <el-table-column prop="user" label="发布人姓名" width="100">
  38.       <template #default="scope" width="180">
  39.         <span>{{ scope.row.user }}</span>
  40.       </template>
  41.     </el-table-column>
  42.     <el-table-column prop="content" label="内容" width="280">
  43.       <template #default="scope" width="180">
  44.         <span>{{ scope.row.content }}</span>
  45.       </template>
  46.     </el-table-column>
  47.     <el-table-column label="操作" width="300">
  48.       <template #header>
  49.         <el-input v-model="search" size="small" placeholder="Type to search" />
  50.       </template>
  51.       <template #default="scope">
  52.         <el-button
  53.           text
  54.           :icon="Edit"
  55.           @click="handleEdit(scope.$index, scope.row)"
  56.           v-permiss="15"
  57.         >
  58.           编辑
  59.         </el-button>
  60.         <el-popconfirm
  61.           confirm-button-text="是"
  62.           cancel-button-text="否"
  63.           title="您确定删除吗？"
  64.           icon-color="#626AEF"
  65.           @confirm="handleDelete(scope.row)"
  66.         >
  67.           <template #reference>
  68.             <el-button>删除</el-button>
  69.           </template>
  70.         </el-popconfirm>
  71.       </template>
  72.     </el-table-column>
  73.   </el-table>
  74.   <!-- 分页组件 -->
  75.   <el-pagination
  76.     @size-change="handleSizeChange"
  77.     @current-change="handleCurrentChange"
  78.     :current-page="currentPage"
  79.     :page-sizes="pageSizes"
  80.     :page-size="pageSize"
  81.     layout="total, sizes, prev, pager, next, jumper"
  82.     :total="total"
  83.   >
  84.   </el-pagination>
  85.  
  86.   <!-- 新增对话框 -->
  87.   <el-dialog title="新增" v-model="addVisible" width="30%">
  88.     <el-form label-width="70px">
  89.       <el-form-item label="标题">
  90.         <el-input v-model="noticeForm.title"></el-input>
  91.       </el-form-item>
  92.       <el-form-item label="公告">
  93.         <el-input v-model="noticeForm.content"></el-input>
  94.       </el-form-item>
  95.     </el-form>
  96.     <template #footer>
  97.       <span class="dialog-footer">
  98.         <el-button @click="addVisible = false">取 消</el-button>
  99.         <el-button type="primary" @click="saveAdd">确 定</el-button>
  100.       </span>
  101.     </template>
  102.   </el-dialog>
  103.  
  104.   <!-- 编辑弹出框 -->
  105.   <el-dialog title="编辑" v-model="editVisible" width="30%">
  106.     <el-form label-width="70px">
  107.       <el-form-item label="编号" v-if="false">
  108.         <el-input v-model="noticeForm.id"></el-input>
  109.       </el-form-item>
  110.       <el-form-item label="标题">
  111.         <el-input v-model="noticeForm.title"></el-input>
  112.       </el-form-item>
  113.       <el-form-item label="内容">
  114.         <el-input v-model="noticeForm.content"></el-input>
  115.       </el-form-item>
  116.     </el-form>
  117.     <template #footer>
  118.       <span class="dialog-footer">
  119.         <el-button @click="editVisible = false">取 消</el-button>
  120.         <el-button type="primary" @click="saveEdit">确 定</el-button>
  121.       </span>
  122.     </template>
  123.   </el-dialog>
  124. </template>
  125. <script setup lang="ts">
  126. import { ref, onMounted, reactive } from "vue";
  127. import {
  128.   getAllNoticesUrl,
  129.   getNoticesByPageUrl,
  130.   deleteNoticeUrl,
  131.   addNoticeUrl,
  132.   editNoticeUrl,
  133. } from "../utils/api";
  134. import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
  135. import { ElMessage, ElMessageBox } from "element-plus";
  136.  
  137. // 声明一个公告类型的接口
  138. interface Notice {
  139.   id: number; // 公告编号
  140.   title: string; // 公告标题
  141.   content: string; // 公告内容
  142.   add_time: string; // 发布时间
  143.   user_id: number; // 用户编号
  144.   user: string; // 用户信息
  145. }
  146. // 公告数据
  147. var tableDataNotices = ref<Notice[]>([]);
  148. // 查询所有的公告并绑定到表格中
  149. // const getAllNoticesData = () => {
  150. //   getAllNoticesUrl().then((res: any) => {
  151. //     console.log(res);
  152. //     tableDataNotices.value = res.data;
  153. //     let total = tableDataNotices.value.length; // 修改总页数
  154. //   });
  155. // };
  156.  
  157. // 查询所有的公告并绑定到表格中（分页）
  158. const getAllNoticesData = () => {
  159.   let params = {
  160.     currentPage: currentPage.value,
  161.     pageSize: pageSize.value,
  162.   };
  163.   getNoticesByPageUrl(params).then((res: any) => {
  164.     console.log(res);
  165.     tableDataNotices.value = res.data;
  166.     total.value = res.total; // 修改总页数
  167.   });
  168. };
  169.  
  170. // 页面加载后查询所有公告数据
  171. onMounted(() => {
  172.   getAllNoticesData();
  173. });
  174. // 分页
  175. const pageSizes = [5, 10, 15, 20, 50, 100];
  176. const pageSize = ref(5); // 每页记录条数
  177. const currentPage = ref(1); // 当前页的索引
  178. const small = ref(false);
  179. const background = ref(false);
  180. const disabled = ref(false);
  181. const total = ref(0); // 总页数
  182.  
  183. // 分页
  184. const handleSizeChange = (val: number) => {
  185.   console.log("${val} items per page");
  186.   pageSize.value = val;
  187.   getAllNoticesData();
  188. };
  189.  
  190. const handleCurrentChange = (val: number) => {
  191.   console.log("current page: ${val}");
  192.   currentPage.value = val;
  193.   getAllNoticesData();
  194. };
  195.  
  196. //删除
  197. const handleDelete = (row: Notice) => {
  198.   let params = row.id;
  199.   deleteNoticeUrl(params).then((res) => {
  200.     console.log(res.data.meta);
  201.     getAllNoticesData();
  202.   });
  203. };
  204.  
  205. // 新增公告
  206. const addVisible = ref(false); // 是否显示新增公告对话框
  207.  
  208. let noticeForm = reactive({
  209.   id: 0,
  210.   title: "", // 公告标题
  211.   content: "", // 公告内容
  212. });
  213.  
  214. const handleAdd = (index: number, row: any) => {
  215.   noticeForm.title = "";
  216.   noticeForm.content = "";
  217.   addVisible.value = true;
  218. };
  219.  
  220. const saveAdd = () => {
  221.   addVisible.value = false;
  222.   let data = {
  223.     title: noticeForm.title,
  224.     content: noticeForm.content,
  225.     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  226.   };
  227.   console.log(data);
  228.   addNoticeUrl(data).then((res) => {
  229.     console.log(res.data);
  230.     getAllNoticesData();
  231.   });
  232. };
  233.  
  234. // 编辑公告
  235. const editVisible = ref(false);
  236. let idx: number = -1;
  237. const handleEdit = (index: number, row: any) => {
  238.   idx = index;
  239.   noticeForm.id = row.id;
  240.   noticeForm.title = row.title;
  241.   noticeForm.content = row.content;
  242.   editVisible.value = true;
  243. };
  244.  
  245. const saveEdit = () => {
  246.   editVisible.value = false;
  247.   ElMessage.success(`修改第 ${idx + 1} 行成功`);
  248.  
  249.   let data = {
  250.     id: noticeForm.id,
  251.     title: noticeForm.title,
  252.     content: noticeForm.content,
  253.   };
  254.   console.log(data);
  255.   editNoticeUrl(data).then((res) => {
  256.     console.log(res.data);
  257.     getAllNoticesData();
  258.   });
  259. };
  260.  
  261. // 筛选数据
  262. const search = ref("");
  263.  
  264. // 多选
  265. const multipleSelection = ref<Notice[]>([]);
  266. const handleSelectionChange = (val: Notice[]) => {
  267.     multipleSelection.value = val;
  268. };
  269.  
  270.  
  271. </script>

八、全选、清除、批量删除 

​

1.  修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-row :gutter="20">
  4.     <el-col :span="4">
  5.       <template #default="scope">
  6.         <el-button
  7.           text
  8.           :icon="Edit"
  9.           @click="handleAdd(scope.$index, scope.row)"
  10.           v-permiss="15"
  11.         >
  12.           新增
  13.         </el-button>
  14.       </template>
  15.     </el-col>
  16.   </el-row>
  17.   <el-table
  18.     ref="tableNoticeRef"
  19.     :data="
  20.       tableDataNotices.filter(
  21.         (data) =>
  22.           !search ||
  23.           data.title.includes(search) ||
  24.           data.title.toLowerCase().includes(search.toLowerCase())
  25.       )
  26.     "
  27.     style="width: 100%"
  28.     status-icon
  29.     @selection-change="handleSelectionChange">
  30.     <el-table-column type="selection" width="55" />
  31.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  32.     <el-table-column prop="title" label="标题" width="380">
  33.       <template #default="scope" width="300">
  34.         <span>{{ scope.row.title }}</span>
  35.       </template>
  36.     </el-table-column>
  37.     <el-table-column prop="user" label="发布人姓名" width="100">
  38.       <template #default="scope" width="180">
  39.         <span>{{ scope.row.user }}</span>
  40.       </template>
  41.     </el-table-column>
  42.     <el-table-column prop="content" label="内容" width="280">
  43.       <template #default="scope" width="180">
  44.         <span>{{ scope.row.content }}</span>
  45.       </template>
  46.     </el-table-column>
  47.     <el-table-column label="操作" width="300">
  48.       <template #header>
  49.         <el-input v-model="search" size="small" placeholder="Type to search" />
  50.       </template>
  51.       <template #default="scope">
  52.         <el-button
  53.           text
  54.           :icon="Edit"
  55.           @click="handleEdit(scope.$index, scope.row)"
  56.           v-permiss="15"
  57.         >
  58.           编辑
  59.         </el-button>
  60.         <el-popconfirm
  61.           confirm-button-text="是"
  62.           cancel-button-text="否"
  63.           title="您确定删除吗？"
  64.           icon-color="#626AEF"
  65.           @confirm="handleDelete(scope.row)"
  66.         >
  67.           <template #reference>
  68.             <el-button>删除</el-button>
  69.           </template>
  70.         </el-popconfirm>
  71.       </template>
  72.     </el-table-column>
  73.   </el-table>
  74.   <!-- 分页组件 -->
  75.   <el-pagination
  76.     @size-change="handleSizeChange"
  77.     @current-change="handleCurrentChange"
  78.     :current-page="currentPage"
  79.     :page-sizes="pageSizes"
  80.     :page-size="pageSize"
  81.     layout="total, sizes, prev, pager, next, jumper"
  82.     :total="total"
  83.   >
  84.   </el-pagination>
  85.  
  86.   <!-- 新增对话框 -->
  87.   <el-dialog title="新增" v-model="addVisible" width="30%">
  88.     <el-form label-width="70px">
  89.       <el-form-item label="标题">
  90.         <el-input v-model="noticeForm.title"></el-input>
  91.       </el-form-item>
  92.       <el-form-item label="公告">
  93.         <el-input v-model="noticeForm.content"></el-input>
  94.       </el-form-item>
  95.     </el-form>
  96.     <template #footer>
  97.       <span class="dialog-footer">
  98.         <el-button @click="addVisible = false">取 消</el-button>
  99.         <el-button type="primary" @click="saveAdd">确 定</el-button>
  100.       </span>
  101.     </template>
  102.   </el-dialog>
  103.  
  104.   <!-- 编辑弹出框 -->
  105.   <el-dialog title="编辑" v-model="editVisible" width="30%">
  106.     <el-form label-width="70px">
  107.       <el-form-item label="编号" v-if="false">
  108.         <el-input v-model="noticeForm.id"></el-input>
  109.       </el-form-item>
  110.       <el-form-item label="标题">
  111.         <el-input v-model="noticeForm.title"></el-input>
  112.       </el-form-item>
  113.       <el-form-item label="内容">
  114.         <el-input v-model="noticeForm.content"></el-input>
  115.       </el-form-item>
  116.     </el-form>
  117.     <template #footer>
  118.       <span class="dialog-footer">
  119.         <el-button @click="editVisible = false">取 消</el-button>
  120.         <el-button type="primary" @click="saveEdit">确 定</el-button>
  121.       </span>
  122.     </template>
  123.   </el-dialog>
  124.   <div style="margin-top: 20px; margin-left: 20px">
  125.         <el-button @click="toggleSelection(tableDataNotices)">全选</el-button>
  126.         <el-button @click="toggleSelection()">清除</el-button>
  127.         <el-button @click="handleDeleteArray()">批量删除</el-button>
  128.     </div>
  129. </template>
  130. <script setup lang="ts">
  131. import { ref, onMounted, reactive } from "vue";
  132. import {
  133.   getAllNoticesUrl,
  134.   getNoticesByPageUrl,
  135.   deleteNoticeUrl,
  136.   addNoticeUrl,
  137.   editNoticeUrl,
  138. } from "../utils/api";
  139. import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
  140. import { ElMessage, ElMessageBox } from "element-plus";
  141. import { ElTable } from "element-plus";
  142.  
  143. // 声明一个公告类型的接口
  144. interface Notice {
  145.   id: number; // 公告编号
  146.   title: string; // 公告标题
  147.   content: string; // 公告内容
  148.   add_time: string; // 发布时间
  149.   user_id: number; // 用户编号
  150.   user: string; // 用户信息
  151. }
  152. // 公告数据
  153. var tableDataNotices = ref<Notice[]>([]);
  154. // 查询所有的公告并绑定到表格中
  155. // const getAllNoticesData = () => {
  156. //   getAllNoticesUrl().then((res: any) => {
  157. //     console.log(res);
  158. //     tableDataNotices.value = res.data;
  159. //     let total = tableDataNotices.value.length; // 修改总页数
  160. //   });
  161. // };
  162.  
  163. // 查询所有的公告并绑定到表格中（分页）
  164. const getAllNoticesData = () => {
  165.   let params = {
  166.     currentPage: currentPage.value,
  167.     pageSize: pageSize.value,
  168.   };
  169.   getNoticesByPageUrl(params).then((res: any) => {
  170.     console.log(res);
  171.     tableDataNotices.value = res.data;
  172.     total.value = res.total; // 修改总页数
  173.   });
  174. };
  175.  
  176. // 页面加载后查询所有公告数据
  177. onMounted(() => {
  178.   getAllNoticesData();
  179. });
  180. // 分页
  181. const pageSizes = [5, 10, 15, 20, 50, 100];
  182. const pageSize = ref(5); // 每页记录条数
  183. const currentPage = ref(1); // 当前页的索引
  184. const small = ref(false);
  185. const background = ref(false);
  186. const disabled = ref(false);
  187. const total = ref(0); // 总页数
  188.  
  189. // 分页
  190. const handleSizeChange = (val: number) => {
  191.   console.log("${val} items per page");
  192.   pageSize.value = val;
  193.   getAllNoticesData();
  194. };
  195.  
  196. const handleCurrentChange = (val: number) => {
  197.   console.log("current page: ${val}");
  198.   currentPage.value = val;
  199.   getAllNoticesData();
  200. };
  201.  
  202. //删除
  203. const handleDelete = (row: Notice) => {
  204.   let params = row.id;
  205.   deleteNoticeUrl(params).then((res) => {
  206.     console.log(res.data.meta);
  207.     getAllNoticesData();
  208.   });
  209. };
  210.  
  211. // 新增公告
  212. const addVisible = ref(false); // 是否显示新增公告对话框
  213.  
  214. let noticeForm = reactive({
  215.   id: 0,
  216.   title: "", // 公告标题
  217.   content: "", // 公告内容
  218. });
  219.  
  220. const handleAdd = (index: number, row: any) => {
  221.   noticeForm.title = "";
  222.   noticeForm.content = "";
  223.   addVisible.value = true;
  224. };
  225.  
  226. const saveAdd = () => {
  227.   addVisible.value = false;
  228.   let data = {
  229.     title: noticeForm.title,
  230.     content: noticeForm.content,
  231.     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  232.   };
  233.   console.log(data);
  234.   addNoticeUrl(data).then((res) => {
  235.     console.log(res.data);
  236.     getAllNoticesData();
  237.   });
  238. };
  239.  
  240. // 编辑公告
  241. const editVisible = ref(false);
  242. let idx: number = -1;
  243. const handleEdit = (index: number, row: any) => {
  244.   idx = index;
  245.   noticeForm.id = row.id;
  246.   noticeForm.title = row.title;
  247.   noticeForm.content = row.content;
  248.   editVisible.value = true;
  249. };
  250.  
  251. const saveEdit = () => {
  252.   editVisible.value = false;
  253.   ElMessage.success(`修改第 ${idx + 1} 行成功`);
  254.  
  255.   let data = {
  256.     id: noticeForm.id,
  257.     title: noticeForm.title,
  258.     content: noticeForm.content,
  259.   };
  260.   console.log(data);
  261.   editNoticeUrl(data).then((res) => {
  262.     console.log(res.data);
  263.     getAllNoticesData();
  264.   });
  265. };
  266.  
  267. // 筛选数据
  268. const search = ref("");
  269.  
  270. // 多选
  271. const multipleSelection = ref<Notice[]>([]);
  272. const tableNoticeRef = ref<InstanceType<typeof ElTable>>();
  273.  
  274. // 全选和清除按钮
  275. const toggleSelection = (rows?: Notice[]) => {
  276.     if (rows) {
  277.         rows.forEach((row) => {
  278.             tableNoticeRef.value!.toggleRowSelection(row, undefined);
  279.         });
  280.     } else {
  281.         tableNoticeRef.value!.clearSelection();
  282.     }
  283. };
  284.  
  285. const handleSelectionChange = (val: Notice[]) => {
  286.     multipleSelection.value = val;
  287. };
  288.  
  289. // 批量删除
  290. const handleDeleteArray = () => {
  291.   for (var i = 0; i < multipleSelection.value.length; i++) {
  292.     let params = multipleSelection.value[i].id;
  293.     deleteNotice(params);
  294.     getAllNoticesData();
  295.   }
  296.   // for (var i = 0; i < multipleSelection.value.length; i++) {
  297.   //       deleteNoticeUrl(multipleSelection.value[i].id).then((res) => {
  298.   //           console.log(res.data.meta);
  299.   //           getAllNoticesData();
  300.   //       });
  301.   //   }
  302. };
  303. </script>

九、Excel导入导出

1. Excel导入

​

 ​

​

2. Excel导出

​

​

3. 安装依赖包

npm install xlsx

4.  Excel模板template.xlsx放入public文件夹中

​

5.   修改NoticesManagement.vue文件

  1. <template>
  2.   <h1>公告管理</h1>
  3.   <el-row :gutter="20">
  4.     <template #default="scope">
  5.       <el-col :span="2">
  6.         <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
  7.       </el-col>
  8.       <el-col :span="2">
  9.         <el-upload
  10.           class="inline-block"
  11.           action="#"
  12.           :limit="1"
  13.           accept=".xlsx, .xls"
  14.           :show-file-list="false"
  15.           :before-upload="beforeUpload"
  16.           :http-request="handleMany"
  17.         >
  18.           <el-button type="primary">批量导入</el-button>
  19.         </el-upload>
  20.       </el-col>
  21.       <el-col :span="2">
  22.         <el-link href="/template.xlsx" type="primary" target="_blank">下载模板</el-link>
  23.       </el-col>
  24.       <el-col :span="2">
  25.         <el-button
  26.           text
  27.           :icon="Edit"
  28.           @click="handleAdd(scope.$index, scope.row)"
  29.           v-permiss="15"
  30.         >
  31.           新增
  32.         </el-button>
  33.       </el-col>
  34.     </template>
  35.   </el-row>
  36.   <el-table
  37.     ref="tableNoticeRef"
  38.     :data="
  39.       tableDataNotices.filter(
  40.         (data) =>
  41.           !search ||
  42.           data.title.includes(search) ||
  43.           data.title.toLowerCase().includes(search.toLowerCase())
  44.       )
  45.     "
  46.     style="width: 100%"
  47.     status-icon
  48.     @selection-change="handleSelectionChange"
  49.   >
  50.     <el-table-column type="selection" width="55" />
  51.     <el-table-column prop="id" label="编号" width="180" v-if="true" />
  52.     <el-table-column prop="title" label="标题" width="380">
  53.       <template #default="scope" width="300">
  54.         <span>{{ scope.row.title }}</span>
  55.       </template>
  56.     </el-table-column>
  57.     <el-table-column prop="user" label="发布人姓名" width="100">
  58.       <template #default="scope" width="180">
  59.         <span>{{ scope.row.user }}</span>
  60.       </template>
  61.     </el-table-column>
  62.     <el-table-column prop="content" label="内容" width="280">
  63.       <template #default="scope" width="180">
  64.         <span>{{ scope.row.content }}</span>
  65.       </template>
  66.     </el-table-column>
  67.     <el-table-column label="操作" width="300">
  68.       <template #header>
  69.         <el-input v-model="search" size="small" placeholder="Type to search" />
  70.       </template>
  71.       <template #default="scope">
  72.         <el-button
  73.           text
  74.           :icon="Edit"
  75.           @click="handleEdit(scope.$index, scope.row)"
  76.           v-permiss="15"
  77.         >
  78.           编辑
  79.         </el-button>
  80.         <el-popconfirm
  81.           confirm-button-text="是"
  82.           cancel-button-text="否"
  83.           title="您确定删除吗？"
  84.           icon-color="#626AEF"
  85.           @confirm="handleDelete(scope.row)"
  86.         >
  87.           <template #reference>
  88.             <el-button>删除</el-button>
  89.           </template>
  90.         </el-popconfirm>
  91.       </template>
  92.     </el-table-column>
  93.   </el-table>
  94.   <!-- 分页组件 -->
  95.   <el-pagination
  96.     @size-change="handleSizeChange"
  97.     @current-change="handleCurrentChange"
  98.     :current-page="currentPage"
  99.     :page-sizes="pageSizes"
  100.     :page-size="pageSize"
  101.     layout="total, sizes, prev, pager, next, jumper"
  102.     :total="total"
  103.   >
  104.   </el-pagination>
  105.  
  106.   <!-- 新增对话框 -->
  107.   <el-dialog title="新增" v-model="addVisible" width="30%">
  108.     <el-form label-width="70px">
  109.       <el-form-item label="标题">
  110.         <el-input v-model="noticeForm.title"></el-input>
  111.       </el-form-item>
  112.       <el-form-item label="公告">
  113.         <el-input v-model="noticeForm.content"></el-input>
  114.       </el-form-item>
  115.     </el-form>
  116.     <template #footer>
  117.       <span class="dialog-footer">
  118.         <el-button @click="addVisible = false">取 消</el-button>
  119.         <el-button type="primary" @click="saveAdd">确 定</el-button>
  120.       </span>
  121.     </template>
  122.   </el-dialog>
  123.  
  124.   <!-- 编辑弹出框 -->
  125.   <el-dialog title="编辑" v-model="editVisible" width="30%">
  126.     <el-form label-width="70px">
  127.       <el-form-item label="编号" v-if="false">
  128.         <el-input v-model="noticeForm.id"></el-input>
  129.       </el-form-item>
  130.       <el-form-item label="标题">
  131.         <el-input v-model="noticeForm.title"></el-input>
  132.       </el-form-item>
  133.       <el-form-item label="内容">
  134.         <el-input v-model="noticeForm.content"></el-input>
  135.       </el-form-item>
  136.     </el-form>
  137.     <template #footer>
  138.       <span class="dialog-footer">
  139.         <el-button @click="editVisible = false">取 消</el-button>
  140.         <el-button type="primary" @click="saveEdit">确 定</el-button>
  141.       </span>
  142.     </template>
  143.   </el-dialog>
  144.   <div style="margin-top: 20px; margin-left: 20px">
  145.     <el-button @click="toggleSelection(tableDataNotices)">全选</el-button>
  146.     <el-button @click="toggleSelection()">清除</el-button>
  147.     <el-button @click="handleDeleteArray()">批量删除</el-button>
  148.   </div>
  149. </template>
  150. <script setup lang="ts">
  151. import { ref, onMounted, reactive } from "vue";
  152. import {
  153.   getAllNoticesUrl,
  154.   getNoticesByPageUrl,
  155.   deleteNoticeUrl,
  156.   addNoticeUrl,
  157.   editNoticeUrl,
  158. } from "../utils/api";
  159. import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
  160. import { ElMessage, ElMessageBox } from "element-plus";
  161. import { ElTable } from "element-plus";
  162. import * as XLSX from "xlsx";
  163. import { UploadProps } from "element-plus";
  164.  
  165. // 声明一个公告类型的接口
  166. interface Notice {
  167.   id: number; // 公告编号
  168.   title: string; // 公告标题
  169.   content: string; // 公告内容
  170.   add_time: string; // 发布时间
  171.   user_id: number; // 用户编号
  172.   user: string; // 用户信息
  173. }
  174. // 公告数据
  175. var tableDataNotices = ref<Notice[]>([]);
  176. // 查询所有的公告并绑定到表格中
  177. // const getAllNoticesData = () => {
  178. //   getAllNoticesUrl().then((res: any) => {
  179. //     console.log(res);
  180. //     tableDataNotices.value = res.data;
  181. //     let total = tableDataNotices.value.length; // 修改总页数
  182. //   });
  183. // };
  184.  
  185. // 查询所有的公告并绑定到表格中（分页）
  186. const getAllNoticesData = async () => {
  187.   let params = {
  188.     currentPage: currentPage.value,
  189.     pageSize: pageSize.value,
  190.   };
  191.   await getNoticesByPageUrl(params).then((res: any) => {
  192.     console.log(res);
  193.     tableDataNotices.value = res.data;
  194.     total.value = res.total; // 修改总页数
  195.   });
  196. };
  197.  
  198. // 页面加载后查询所有公告数据
  199. onMounted(() => {
  200.   getAllNoticesData();
  201. });
  202. // 分页
  203. const pageSizes = [5, 10, 15, 20, 50, 100];
  204. const pageSize = ref(5); // 每页记录条数
  205. const currentPage = ref(1); // 当前页的索引
  206. const small = ref(false);
  207. const background = ref(false);
  208. const disabled = ref(false);
  209. const total = ref(0); // 总页数
  210.  
  211. // 分页
  212. const handleSizeChange = (val: number) => {
  213.   console.log("${val} items per page");
  214.   pageSize.value = val;
  215.   getAllNoticesData();
  216. };
  217.  
  218. const handleCurrentChange = (val: number) => {
  219.   console.log("current page: ${val}");
  220.   currentPage.value = val;
  221.   getAllNoticesData();
  222. };
  223.  
  224. //删除
  225. const handleDelete = async (row: Notice) => {
  226.   let params = row.id;
  227.   await deleteNoticeUrl(params).then((res) => {
  228.     console.log(res.data.meta);
  229.     getAllNoticesData();
  230.   });
  231. };
  232.  
  233. // 新增公告
  234. const addVisible = ref(false); // 是否显示新增公告对话框
  235.  
  236. let noticeForm = reactive({
  237.   id: 0,
  238.   title: "", // 公告标题
  239.   content: "", // 公告内容
  240. });
  241.  
  242. const handleAdd = (index: number, row: any) => {
  243.   noticeForm.title = "";
  244.   noticeForm.content = "";
  245.   addVisible.value = true;
  246. };
  247.  
  248. const saveAdd = async () => {
  249.   addVisible.value = false;
  250.   let data = {
  251.     title: noticeForm.title,
  252.     content: noticeForm.content,
  253.     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  254.   };
  255.   console.log(data);
  256.   await addNoticeUrl(data).then((res) => {
  257.     console.log(res.data);
  258.     getAllNoticesData();
  259.   });
  260. };
  261.  
  262. // 编辑公告
  263. const editVisible = ref(false);
  264. let idx: number = -1;
  265. const handleEdit = (index: number, row: any) => {
  266.   idx = index;
  267.   noticeForm.id = row.id;
  268.   noticeForm.title = row.title;
  269.   noticeForm.content = row.content;
  270.   editVisible.value = true;
  271. };
  272.  
  273. const saveEdit = async () => {
  274.   editVisible.value = false;
  275.   ElMessage.success(`修改第 ${idx + 1} 行成功`);
  276.  
  277.   let data = {
  278.     id: noticeForm.id,
  279.     title: noticeForm.title,
  280.     content: noticeForm.content,
  281.   };
  282.   console.log(data);
  283.   await editNoticeUrl(data).then((res) => {
  284.     console.log(res.data);
  285.     getAllNoticesData();
  286.   });
  287. };
  288.  
  289. // 筛选数据
  290. const search = ref("");
  291.  
  292. // 多选
  293. const multipleSelection = ref<Notice[]>([]);
  294. const tableNoticeRef = ref<InstanceType<typeof ElTable>>();
  295.  
  296. // 全选和清除按钮
  297. const toggleSelection = (rows?: Notice[]) => {
  298.   if (rows) {
  299.     rows.forEach((row) => {
  300.       tableNoticeRef.value!.toggleRowSelection(row, undefined);
  301.     });
  302.   } else {
  303.     tableNoticeRef.value!.clearSelection();
  304.   }
  305. };
  306.  
  307. const handleSelectionChange = (val: Notice[]) => {
  308.   multipleSelection.value = val;
  309. };
  310.  
  311. // 批量删除
  312. const handleDeleteArray = async () => {
  313.   // console.log(multipleSelection.value)
  314.   for (var i = 0; i < multipleSelection.value.length; i++) {
  315.     await deleteNoticeUrl(multipleSelection.value[i].id).then((res) => {
  316.       console.log(res.data.meta);
  317.       getAllNoticesData();
  318.     });
  319.   }
  320. };
  321.  
  322. // Excel导入导出
  323. // 导出Excel函数
  324. const exportXlsx = () => {
  325.   // 使用computed属性计算表格数据，只有在tableDataNotices变化时才会重新计算
  326.   const list = computed(() => {
  327.     // 将tableDataNotices数组转换为二维数组
  328.     return [["编号", "标题", "内容", "发布时间", "发布人姓名"], ...tableDataNotices.value.map((item: any, i: number) => {
  329.       // 返回一个数组，包含该条记录的所有字段
  330.       return [i + 1, item.title, item.content, item.add_time, item.user];
  331.     })];
  332.   }).value;
  333.  
  334.   // 将数据转换为工作表
  335.   let WorkSheet = XLSX.utils.aoa_to_sheet(list);
  336.   // 创建一个新的工作簿
  337.   let new_workbook = XLSX.utils.book_new();
  338.   // 将工作表添加到工作簿中，并指定名称为“第一页”
  339.   XLSX.utils.book_append_sheet(new_workbook, WorkSheet, "第一页");
  340.   // 保存工作簿为Excel文件，文件名为“表格.xlsx”
  341.   XLSX.writeFile(new_workbook, `表格.xlsx`);
  342. };
  343.  
  344.  
  345. // 导入Excel
  346. const importList = ref<any>([]);
  347. // 上传前对Excel文件进行解析
  348. const beforeUpload: UploadProps["beforeUpload"] = async (rawFile) => {
  349.   // 调用analysisExcel函数，解析Excel文件并将结果保存在importList中
  350.   importList.value = await analysisExcel(rawFile);
  351.   // 返回true表示上传文件
  352.   return true;
  353. };
  354.  
  355. // 解析Excel文件
  356. const analysisExcel = (file: any) => {
  357.   return new Promise(function (resolve, reject) {
  358.     const reader = new FileReader();
  359.     reader.onload = function (e: any) {
  360.       const data = e.target.result;
  361.       // 使用XLSX读取二进制数据并将其转换为json格式
  362.       const workbook = XLSX.read(data, { type: "binary" });
  363.       // 获取第一个Sheet的名称
  364.       const sheetName = workbook.SheetNames[0];
  365.       // 将Sheet转换为json格式
  366.       const result = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
  367.       resolve(result);
  368.     };
  369.     reader.readAsBinaryString(file);
  370.   });
  371. };
  372.  
  373. // 批量添加公告
  374. const handleMany = async () => {
  375.   // 将importList中的数据转换为公告列表
  376.   const notices = importList.value.map((item: any) => ({
  377.     title: item["标题"],
  378.     content: item["内容"],
  379.     user_id: 1,
  380.   }));
  381.  
  382.   // 添加公告并刷新页面
  383.   for (let i = 0; i < notices.length; i++) {
  384.     await addNoticeUrl(notices[i]);
  385.   }
  386.   location.reload();
  387. };
  388. </script>
 


                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/113624
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号