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

• 后端

目录

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

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文件

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

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

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

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

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

// 获得所有公告信息
export function getAllNoticesUrl() {
    return request({
        url: 'api/notices/',
        method: 'get',
    })
}

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

  
公告管理

  
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    
  


import { ref, onMounted } from "vue";
import { getAllNoticesUrl } from "../utils/api";
// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
const getAllNoticesData = () => {
  getAllNoticesUrl().then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
   
  });
};
// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});

二、实现分页

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

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

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

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

// 分页
export function getNoticesByPageUrl(params: any) {
    return request({
        url: 'api/notices/' + Number(params['currentPage']) + '/' + Number(params['pageSize']) + '/',
        method: 'get',
    })
}

3.  修改NoticesManagement.vue文件

  
公告管理

  
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    
  
  
  
  


import { ref, onMounted } from "vue";
import { getAllNoticesUrl, getNoticesByPageUrl } from "../utils/api";
// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

三、删除

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

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

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

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

// 删除公告
export function deleteNoticeUrl(params:any) {
    return request({
        url: 'api/delete_notice/' + params + "/",
        method: 'delete',
    })
}

3.  修改NoticesManagement.vue文件

  
公告管理

  
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    

    
                    
                        
                            
                                
                                    删除
                                
                                                       
                        
                    
                
  
  
  
  


import { ref, onMounted } from "vue";
import { getAllNoticesUrl, getNoticesByPageUrl, deleteNoticeUrl } from "../utils/api";
// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

//删除
const handleDelete = (row: Notice) => {
    let params = row.id;
    deleteNoticeUrl(params).then((res) => {
        console.log(res.data.meta);
        getAllNoticesData();
    });
};

/*
const handleDelete = (index: number, row: Notice) => {
  let params = row.id;
  deleteNotice(params);
};

const deleteNotice = async (params: any) => {
  try {
    const response = await deleteNoticeUrl(params);
    console.log(response.data.meta);
    getAllNoticesData();
  } catch (error) {
    console.error(error);
  }
};
*/

4. 添加删除对话框

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

 
    
            Delete
    

    ……
    import { InfoFilled } from '@element-plus/icons-vue'
    const cancelEvent = () => {
      console.log('cancel!')
    }

四、新增公告 

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

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

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

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

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

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

// 新增公告
export function addNoticeUrl(data:any) {
    return request({
        url: 'api/add_notice/',
        method: 'post',
        data: data,
    })
}

3.  修改NoticesManagement.vue文件

  
公告管理

  
		
			
				
					新增
				
			
		
	
  
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    

    
                    
                        
                            
                                
                                    删除
                                
                                                       
                        
                    
                
  
  
  
  

  
	
		
			
				
			
			
				
					
		
		
			
				取 消
				确 定
			
		
	


import { ref, onMounted, reactive } from "vue";
import { getAllNoticesUrl, getNoticesByPageUrl, deleteNoticeUrl, addNoticeUrl } from "../utils/api";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

//删除
const handleDelete = (row: Notice) => {
    let params = row.id;
    deleteNoticeUrl(params).then((res) => {
        console.log(res.data.meta);
        getAllNoticesData();
    });
};

// 新增公告
const addVisible = ref(false);  // 是否显示新增公告对话框

let noticeForm = reactive({
	title: "",      // 公告标题
	content: "",    // 公告内容
});

const handleAdd = () => {
	noticeForm.title = ''
	noticeForm.content = ''
	addVisible.value = true;
};

const saveAdd = async () => {
  try {
    let data = {
      title: noticeForm.title,
      content: noticeForm.content,
      user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
    };  
    const res = await addNoticeUrl(data);
    console.log(res.data);
    dialogFormVisible.value = false;
    getAllNoticesData();
  } catch (error) {
    console.error(error);
  }
};

// const saveAdd = () => {
//   dialogFormVisible.value = false;
//   let data = {
//     title: noticeForm.title,
//     content: noticeForm.content,
//     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
//   };
//   console.log(data);
//   addNoticeUrl(data).then((res) => {
//     console.log(res.data);
//     dialogFormVisible.value = false;
//     getAllNoticesData();
//   });
// };

五、编辑公告 

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

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

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

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

{
    "id":19,
    "title": "会议通知",
    "content": "abcccccc"
}

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

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

// 编辑公告
export function editNoticeUrl(data:any) {
    return request({
        url: 'api/edit_notice/',
        method: 'put',
        data: data,
    })
}

3.  修改NoticesManagement.vue文件

  
公告管理

  
    
      
        
          新增
        
      
    
  
  
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    
    
      
        
          编辑
        
        
          
            删除
          
        
      
    
  
  
  
  

  
  
    
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  

  
  
    
      
        
      
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  


import { ref, onMounted, reactive } from "vue";
import {
  getAllNoticesUrl,
  getNoticesByPageUrl,
  deleteNoticeUrl,
  addNoticeUrl,
  editNoticeUrl,
} from "../utils/api";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

//删除
const handleDelete = (row: Notice) => {
  let params = row.id;
  deleteNoticeUrl(params).then((res) => {
    console.log(res.data.meta);
    getAllNoticesData();
  });
};

// 新增公告
const addVisible = ref(false); // 是否显示新增公告对话框

let noticeForm = reactive({
  id: 0,
  title: "", // 公告标题
  content: "", // 公告内容
});

const handleAdd = (index: number, row: any) => {
  noticeForm.title = "";
  noticeForm.content = "";
  addVisible.value = true;
};

const saveAdd = () => {
  addVisible.value = false;
  let data = {
    title: noticeForm.title,
    content: noticeForm.content,
    user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  };
  console.log(data);
  addNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 编辑公告
const editVisible = ref(false);
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
  idx = index;
  noticeForm.id = row.id;
  noticeForm.title = row.title;
  noticeForm.content = row.content;
  editVisible.value = true;
};

const saveEdit = async () => {
  try {
    const data = {
      id: noticeForm.id,
      title: noticeForm.title,
      content: noticeForm.content,
    };
    const res = await editNoticeUrl(data);
    console.log(res.data);
    ElMessage.success(`修改第 ${idx + 1} 行成功`);
    editVisible.value = false;
    getAllNoticesData();
  } catch (error) {
    console.error(error);
    // Handle error
  }
};

// const saveEdit = () => {
//   editVisible.value = false;
//   ElMessage.success(`修改第 ${idx + 1} 行成功`);

//   let data = {
//     id: noticeForm.id,
//     title: noticeForm.title,
//     content: noticeForm.content,
//   };
//   console.log(data);
//   editNoticeUrl(data).then((res) => {
//     console.log(res.data);
//     getAllNoticesData();
//   });
// };

六、筛选公告

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）​1.  修改NoticesManagement.vue文件

  
公告管理

  
    
      
        
          新增
        
      
    
  
  
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    
    status-icon
  >
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    
    
      
        
      
      
        
          编辑
        
        
          
            删除
          
        
      
    
  
  
  
  

  
  
    
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  

  
  
    
      
        
      
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  


import { ref, onMounted, reactive } from "vue";
import {
  getAllNoticesUrl,
  getNoticesByPageUrl,
  deleteNoticeUrl,
  addNoticeUrl,
  editNoticeUrl,
} from "../utils/api";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

//删除
const handleDelete = (row: Notice) => {
  let params = row.id;
  deleteNoticeUrl(params).then((res) => {
    console.log(res.data.meta);
    getAllNoticesData();
  });
};

// 新增公告
const addVisible = ref(false); // 是否显示新增公告对话框

let noticeForm = reactive({
  id: 0,
  title: "", // 公告标题
  content: "", // 公告内容
});

const handleAdd = (index: number, row: any) => {
  noticeForm.title = "";
  noticeForm.content = "";
  addVisible.value = true;
};

async function saveAdd() {
  try {
    const data = {
      title: noticeForm.title,
      content: noticeForm.content,
      user_id: 1
    }; 
    dialogFormVisible.value = false;
    const res = await addNoticeUrl(data);
    console.log(res.data);
    await getAllNoticesData();
  } catch (error) {
    console.error(error);
  }
}

// const saveAdd = () => {
//   addVisible.value = false;
//   let data = {
//     title: noticeForm.title,
//     content: noticeForm.content,
//     user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
//   };
//   console.log(data);
//   addNoticeUrl(data).then((res) => {
//     console.log(res.data);
//     getAllNoticesData();
//   });
// };

// 编辑公告
const editVisible = ref(false);
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
  idx = index;
  noticeForm.id = row.id;
  noticeForm.title = row.title;
  noticeForm.content = row.content;
  editVisible.value = true;
};

const saveEdit = () => {
  editVisible.value = false;
  ElMessage.success(`修改第 ${idx + 1} 行成功`);

  let data = {
    id: noticeForm.id,
    title: noticeForm.title,
    content: noticeForm.content,
  };
  console.log(data);
  editNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 筛选数据
const search = ref("");

七、多选

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

1.  修改NoticesManagement.vue文件

  
公告管理

  
    
      
        
          新增
        
      
    
  
  
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    
    status-icon
    @selection-change="handleSelectionChange">
    
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    
    
      
        
      
      
        
          编辑
        
        
          
            删除
          
        
      
    
  
  
  
  

  
  
    
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  

  
  
    
      
        
      
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  


import { ref, onMounted, reactive } from "vue";
import {
  getAllNoticesUrl,
  getNoticesByPageUrl,
  deleteNoticeUrl,
  addNoticeUrl,
  editNoticeUrl,
} from "../utils/api";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

//删除
const handleDelete = (row: Notice) => {
  let params = row.id;
  deleteNoticeUrl(params).then((res) => {
    console.log(res.data.meta);
    getAllNoticesData();
  });
};

// 新增公告
const addVisible = ref(false); // 是否显示新增公告对话框

let noticeForm = reactive({
  id: 0,
  title: "", // 公告标题
  content: "", // 公告内容
});

const handleAdd = (index: number, row: any) => {
  noticeForm.title = "";
  noticeForm.content = "";
  addVisible.value = true;
};

const saveAdd = () => {
  addVisible.value = false;
  let data = {
    title: noticeForm.title,
    content: noticeForm.content,
    user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  };
  console.log(data);
  addNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 编辑公告
const editVisible = ref(false);
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
  idx = index;
  noticeForm.id = row.id;
  noticeForm.title = row.title;
  noticeForm.content = row.content;
  editVisible.value = true;
};

const saveEdit = () => {
  editVisible.value = false;
  ElMessage.success(`修改第 ${idx + 1} 行成功`);

  let data = {
    id: noticeForm.id,
    title: noticeForm.title,
    content: noticeForm.content,
  };
  console.log(data);
  editNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 筛选数据
const search = ref("");

// 多选
const multipleSelection = ref([]);
const handleSelectionChange = (val: Notice[]) => {
    multipleSelection.value = val;
};

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

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

1.  修改NoticesManagement.vue文件

  
公告管理

  
    
      
        
          新增
        
      
    
  
  
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    
    status-icon
    @selection-change="handleSelectionChange">
    
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    
    
      
        
      
      
        
          编辑
        
        
          
            删除
          
        
      
    
  
  
  
  

  
  
    
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  

  
  
    
      
        
      
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  
  
        全选
        清除
        批量删除
    


import { ref, onMounted, reactive } from "vue";
import {
  getAllNoticesUrl,
  getNoticesByPageUrl,
  deleteNoticeUrl,
  addNoticeUrl,
  editNoticeUrl,
} from "../utils/api";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElTable } from "element-plus";

// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

//删除
const handleDelete = (row: Notice) => {
  let params = row.id;
  deleteNoticeUrl(params).then((res) => {
    console.log(res.data.meta);
    getAllNoticesData();
  });
};

// 新增公告
const addVisible = ref(false); // 是否显示新增公告对话框

let noticeForm = reactive({
  id: 0,
  title: "", // 公告标题
  content: "", // 公告内容
});

const handleAdd = (index: number, row: any) => {
  noticeForm.title = "";
  noticeForm.content = "";
  addVisible.value = true;
};

const saveAdd = () => {
  addVisible.value = false;
  let data = {
    title: noticeForm.title,
    content: noticeForm.content,
    user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  };
  console.log(data);
  addNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 编辑公告
const editVisible = ref(false);
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
  idx = index;
  noticeForm.id = row.id;
  noticeForm.title = row.title;
  noticeForm.content = row.content;
  editVisible.value = true;
};

const saveEdit = () => {
  editVisible.value = false;
  ElMessage.success(`修改第 ${idx + 1} 行成功`);

  let data = {
    id: noticeForm.id,
    title: noticeForm.title,
    content: noticeForm.content,
  };
  console.log(data);
  editNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 筛选数据
const search = ref("");

// 多选
const multipleSelection = ref([]);
const tableNoticeRef = ref<InstanceType>();

// 全选和清除按钮
const toggleSelection = (rows?: Notice[]) => {
    if (rows) {
        rows.forEach((row) => {
            tableNoticeRef.value!.toggleRowSelection(row, undefined);
        });
    } else {
        tableNoticeRef.value!.clearSelection();
    }
};

const handleSelectionChange = (val: Notice[]) => {
    multipleSelection.value = val;
};

// 批量删除
const handleDeleteArray = () => {
  for (var i = 0; i < multipleSelection.value.length; i++) {
    let params = multipleSelection.value[i].id;
    deleteNotice(params);
    getAllNoticesData();
  }
  // for (var i = 0; i  {
  //           console.log(res.data.meta);
  //           getAllNoticesData();
  //       });
  //   }
};

九、Excel导入导出

1. Excel导入

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

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

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

2. Excel导出

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

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

3. 安装依赖包

npm install xlsx

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

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

5.   修改NoticesManagement.vue文件

  
公告管理

  
    
      
        导出Excel
      
      
        
          批量导入
        
      
      
        下载模板
      
      
        
          新增
        
      
    
  
  
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    
    status-icon
    @selection-change="handleSelectionChange"
  >
    
    
    
      
        {{ scope.row.title }}
      
    
    
      
        {{ scope.row.user }}
      
    
    
      
        {{ scope.row.content }}
      
    
    
      
        
      
      
        
          编辑
        
        
          
            删除
          
        
      
    
  
  
  
  

  
  
    
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  

  
  
    
      
        
      
      
        
      
      
        
      
    
    
      
        取 消
        确 定
      
    
  
  
    全选
    清除
    批量删除
  


import { ref, onMounted, reactive } from "vue";
import {
  getAllNoticesUrl,
  getNoticesByPageUrl,
  deleteNoticeUrl,
  addNoticeUrl,
  editNoticeUrl,
} from "../utils/api";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElTable } from "element-plus";
import * as XLSX from "xlsx";
import { UploadProps } from "element-plus";

// 声明一个公告类型的接口
interface Notice {
  id: number; // 公告编号
  title: string; // 公告标题
  content: string; // 公告内容
  add_time: string; // 发布时间
  user_id: number; // 用户编号
  user: string; // 用户信息
}
// 公告数据
var tableDataNotices = ref([]);
// 查询所有的公告并绑定到表格中
// const getAllNoticesData = () => {
//   getAllNoticesUrl().then((res: any) => {
//     console.log(res);
//     tableDataNotices.value = res.data;
//     let total = tableDataNotices.value.length; // 修改总页数
//   });
// };

// 查询所有的公告并绑定到表格中（分页）
const getAllNoticesData = async () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  await getNoticesByPageUrl(params).then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
    total.value = res.total; // 修改总页数
  });
};

// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
// 分页
const pageSizes = [5, 10, 15, 20, 50, 100];
const pageSize = ref(5); // 每页记录条数
const currentPage = ref(1); // 当前页的索引
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0); // 总页数

// 分页
const handleSizeChange = (val: number) => {
  console.log("${val} items per page");
  pageSize.value = val;
  getAllNoticesData();
};

const handleCurrentChange = (val: number) => {
  console.log("current page: ${val}");
  currentPage.value = val;
  getAllNoticesData();
};

//删除
const handleDelete = async (row: Notice) => {
  let params = row.id;
  await deleteNoticeUrl(params).then((res) => {
    console.log(res.data.meta);
    getAllNoticesData();
  });
};

// 新增公告
const addVisible = ref(false); // 是否显示新增公告对话框

let noticeForm = reactive({
  id: 0,
  title: "", // 公告标题
  content: "", // 公告内容
});

const handleAdd = (index: number, row: any) => {
  noticeForm.title = "";
  noticeForm.content = "";
  addVisible.value = true;
};

const saveAdd = async () => {
  addVisible.value = false;
  let data = {
    title: noticeForm.title,
    content: noticeForm.content,
    user_id: 1, // 用户编号先用个固定值，后面需要得到登录用户的编号
  };
  console.log(data);
  await addNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 编辑公告
const editVisible = ref(false);
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
  idx = index;
  noticeForm.id = row.id;
  noticeForm.title = row.title;
  noticeForm.content = row.content;
  editVisible.value = true;
};

const saveEdit = async () => {
  editVisible.value = false;
  ElMessage.success(`修改第 ${idx + 1} 行成功`);

  let data = {
    id: noticeForm.id,
    title: noticeForm.title,
    content: noticeForm.content,
  };
  console.log(data);
  await editNoticeUrl(data).then((res) => {
    console.log(res.data);
    getAllNoticesData();
  });
};

// 筛选数据
const search = ref("");

// 多选
const multipleSelection = ref([]);
const tableNoticeRef = ref<InstanceType>();

// 全选和清除按钮
const toggleSelection = (rows?: Notice[]) => {
  if (rows) {
    rows.forEach((row) => {
      tableNoticeRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    tableNoticeRef.value!.clearSelection();
  }
};

const handleSelectionChange = (val: Notice[]) => {
  multipleSelection.value = val;
};

// 批量删除
const handleDeleteArray = async () => {
  // console.log(multipleSelection.value)
  for (var i = 0; i  {
      console.log(res.data.meta);
      getAllNoticesData();
    });
  }
};

// Excel导入导出
// 导出Excel函数
const exportXlsx = () => {
  // 使用computed属性计算表格数据，只有在tableDataNotices变化时才会重新计算
  const list = computed(() => {
    // 将tableDataNotices数组转换为二维数组
    return [["编号", "标题", "内容", "发布时间", "发布人姓名"], ...tableDataNotices.value.map((item: any, i: number) => {
      // 返回一个数组，包含该条记录的所有字段
      return [i + 1, item.title, item.content, item.add_time, item.user];
    })];
  }).value;

  // 将数据转换为工作表
  let WorkSheet = XLSX.utils.aoa_to_sheet(list);
  // 创建一个新的工作簿
  let new_workbook = XLSX.utils.book_new();
  // 将工作表添加到工作簿中，并指定名称为“第一页”
  XLSX.utils.book_append_sheet(new_workbook, WorkSheet, "第一页");
  // 保存工作簿为Excel文件，文件名为“表格.xlsx”
  XLSX.writeFile(new_workbook, `表格.xlsx`);
};


// 导入Excel
const importList = ref([]);
// 上传前对Excel文件进行解析
const beforeUpload: UploadProps["beforeUpload"] = async (rawFile) => {
  // 调用analysisExcel函数，解析Excel文件并将结果保存在importList中
  importList.value = await analysisExcel(rawFile);
  // 返回true表示上传文件
  return true;
};

// 解析Excel文件
const analysisExcel = (file: any) => {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader();
    reader.onload = function (e: any) {
      const data = e.target.result;
      // 使用XLSX读取二进制数据并将其转换为json格式
      const workbook = XLSX.read(data, { type: "binary" });
      // 获取第一个Sheet的名称
      const sheetName = workbook.SheetNames[0];
      // 将Sheet转换为json格式
      const result = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
      resolve(result);
    };
    reader.readAsBinaryString(file);
  });
};

// 批量添加公告
const handleMany = async () => {
  // 将importList中的数据转换为公告列表
  const notices = importList.value.map((item: any) => ({
    title: item["标题"],
    content: item["内容"],
    user_id: 1,
  }));

  // 添加公告并刷新页面
  for (let i = 0; i < notices.length; i++) {
    await addNoticeUrl(notices[i]);
  }
  location.reload();
};



                                                        
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/94b3f72a4c.html
                        

                        

                            

                            

                                
 赞 (0)


                                                            


                            

                                

                                                                        

                                        

                                                                                                                                                                            

                                        
                                        

                                            
                                        

                                    

                                

                            


                            

                                                                    

                                        
                                        

                                            « 上一篇
                                            1天前
                                        

                                    

                                                                                                    

                                        
                                        

                                            下一篇  »
                                            1天前
                                        

                                    

                                                            

                                                        
相关推荐