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

最新推荐文章于 2024-09-16 23:46:36 发布
最新推荐文章于 2024-09-16 23:46:36 发布
阅读量2.9k 收藏 17
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boxuestudio/article/details/130040745
版权

目录

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

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中增加如下函数，用于调用后端接口查询所有公告信息

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

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

<template>
  <h1>公告管理</h1>
  <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
const getAllNoticesData = () => {
  getAllNoticesUrl().then((res: any) => {
    console.log(res);
    tableDataNotices.value = res.data;
   
  });
};
// 页面加载后查询所有公告数据
onMounted(() => {
  getAllNoticesData();
});
</script>

二、实现分页

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

​

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

<template>
  <h1>公告管理</h1>
  <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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();
};
</script>

三、删除

​

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

​

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

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

3.  修改NoticesManagement.vue文件

<template>
  <h1>公告管理</h1>
  <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="300">
                    <template #default="scope">
                        <div>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="您确定删除吗？"
                                icon-color="#626AEF" @confirm="handleDelete(scope.row)">
                                <template #reference>
                                    <el-button>删除</el-button>
                                </template>
                            </el-popconfirm>                           
                        </div>
                    </template>
                </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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);
  }
};
*/
</script>

4. 添加删除对话框

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

四、新增公告 

​

 ​

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

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

​

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

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

3.  修改NoticesManagement.vue文件

<template>
  <h1>公告管理</h1>
  <el-row :gutter="20">
		<el-col :span="4">
			<template #default="scope">
				<el-button text :icon="Edit" @click="handleAdd()" v-permiss="15">
					新增
				</el-button>
			</template>
		</el-col>
	</el-row>
  <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="300">
                    <template #default="scope">
                        <div>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="您确定删除吗？"
                                icon-color="#626AEF" @confirm="handleDelete(scope.row)">
                                <template #reference>
                                    <el-button>删除</el-button>
                                </template>
                            </el-popconfirm>                           
                        </div>
                    </template>
                </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <!-- 新增对话框 -->
	<el-dialog title="新增" v-model="addVisible" width="30%">
		<el-form label-width="70px">
			<el-form-item label="标题">
				<el-input v-model="noticeForm.title"></el-input>
			</el-form-item>
			<el-form-item label="公告">
				<el-input v-model="noticeForm.content"></el-input>
			</el-form-item>		
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdd">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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();
//   });
// };
</script>

五、编辑公告 

​

​

​

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

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

​

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

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

3.  修改NoticesManagement.vue文件

<template>
  <h1>公告管理</h1>
  <el-row :gutter="20">
    <el-col :span="4">
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleAdd(scope.$index, scope.row)"
          v-permiss="15"
        >
          新增
        </el-button>
      </template>
    </el-col>
  </el-row>
  <el-table ref="tableNoticeRef" :data="tableDataNotices" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleEdit(scope.$index, scope.row)"
          v-permiss="15"
        >
          编辑
        </el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          title="您确定删除吗？"
          icon-color="#626AEF"
          @confirm="handleDelete(scope.row)">
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <!-- 新增对话框 -->
  <el-dialog title="新增" v-model="addVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="公告">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹出框 -->
  <el-dialog title="编辑" v-model="editVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="编号" v-if="false">
        <el-input v-model="noticeForm.id"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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();
//   });
// };
</script>

六、筛选公告

​1.  修改NoticesManagement.vue文件

<template>
  <h1>公告管理</h1>
  <el-row :gutter="20">
    <el-col :span="4">
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleAdd(scope.$index, scope.row)"
          v-permiss="15"
        >
          新增
        </el-button>
      </template>
    </el-col>
  </el-row>
  <el-table
    ref="tableNoticeRef"
    :data="
      tableDataNotices.filter(
        (data) =>
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    style="width: 100%"
    status-icon
  >
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleEdit(scope.$index, scope.row)"
          v-permiss="15"
        >
          编辑
        </el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          title="您确定删除吗？"
          icon-color="#626AEF"
          @confirm="handleDelete(scope.row)"
        >
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <!-- 新增对话框 -->
  <el-dialog title="新增" v-model="addVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="公告">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹出框 -->
  <el-dialog title="编辑" v-model="editVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="编号" v-if="false">
        <el-input v-model="noticeForm.id"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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("");


</script>

七、多选

​

1.  修改NoticesManagement.vue文件

<template>
  <h1>公告管理</h1>
  <el-row :gutter="20">
    <el-col :span="4">
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleAdd(scope.$index, scope.row)"
          v-permiss="15"
        >
          新增
        </el-button>
      </template>
    </el-col>
  </el-row>
  <el-table
    ref="tableNoticeRef"
    :data="
      tableDataNotices.filter(
        (data) =>
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    style="width: 100%"
    status-icon
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleEdit(scope.$index, scope.row)"
          v-permiss="15"
        >
          编辑
        </el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          title="您确定删除吗？"
          icon-color="#626AEF"
          @confirm="handleDelete(scope.row)"
        >
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <!-- 新增对话框 -->
  <el-dialog title="新增" v-model="addVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="公告">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹出框 -->
  <el-dialog title="编辑" v-model="editVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="编号" v-if="false">
        <el-input v-model="noticeForm.id"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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<Notice[]>([]);
const handleSelectionChange = (val: Notice[]) => {
    multipleSelection.value = val;
};


</script>

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

​

1.  修改NoticesManagement.vue文件

<template>
  <h1>公告管理</h1>
  <el-row :gutter="20">
    <el-col :span="4">
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleAdd(scope.$index, scope.row)"
          v-permiss="15"
        >
          新增
        </el-button>
      </template>
    </el-col>
  </el-row>
  <el-table
    ref="tableNoticeRef"
    :data="
      tableDataNotices.filter(
        (data) =>
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    style="width: 100%"
    status-icon
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleEdit(scope.$index, scope.row)"
          v-permiss="15"
        >
          编辑
        </el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          title="您确定删除吗？"
          icon-color="#626AEF"
          @confirm="handleDelete(scope.row)"
        >
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <!-- 新增对话框 -->
  <el-dialog title="新增" v-model="addVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="公告">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹出框 -->
  <el-dialog title="编辑" v-model="editVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="编号" v-if="false">
        <el-input v-model="noticeForm.id"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <div style="margin-top: 20px; margin-left: 20px">
        <el-button @click="toggleSelection(tableDataNotices)">全选</el-button>
        <el-button @click="toggleSelection()">清除</el-button>
        <el-button @click="handleDeleteArray()">批量删除</el-button>
    </div>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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<Notice[]>([]);
const tableNoticeRef = ref<InstanceType<typeof ElTable>>();

// 全选和清除按钮
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 < multipleSelection.value.length; i++) {
  //       deleteNoticeUrl(multipleSelection.value[i].id).then((res) => {
  //           console.log(res.data.meta);
  //           getAllNoticesData();
  //       });
  //   }
};
</script>

九、Excel导入导出

1. Excel导入

​

 ​

​

2. Excel导出

​

​

3. 安装依赖包

npm install xlsx

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

​

5.   修改NoticesManagement.vue文件

<template>
  <h1>公告管理</h1>
  <el-row :gutter="20">
    <template #default="scope">
      <el-col :span="2">
        <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
      </el-col>
      <el-col :span="2">
        <el-upload
          class="inline-block"
          action="#"
          :limit="1"
          accept=".xlsx, .xls"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :http-request="handleMany"
        >
          <el-button type="primary">批量导入</el-button>
        </el-upload>
      </el-col>
      <el-col :span="2">
        <el-link href="/template.xlsx" type="primary" target="_blank">下载模板</el-link>
      </el-col>
      <el-col :span="2">
        <el-button
          text
          :icon="Edit"
          @click="handleAdd(scope.$index, scope.row)"
          v-permiss="15"
        >
          新增
        </el-button>
      </el-col>
    </template>
  </el-row>
  <el-table
    ref="tableNoticeRef"
    :data="
      tableDataNotices.filter(
        (data) =>
          !search ||
          data.title.includes(search) ||
          data.title.toLowerCase().includes(search.toLowerCase())
      )
    "
    style="width: 100%"
    status-icon
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="title" label="标题" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="user" label="发布人姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.user }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
          text
          :icon="Edit"
          @click="handleEdit(scope.$index, scope.row)"
          v-permiss="15"
        >
          编辑
        </el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          title="您确定删除吗？"
          icon-color="#626AEF"
          @confirm="handleDelete(scope.row)"
        >
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <!-- 新增对话框 -->
  <el-dialog title="新增" v-model="addVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="公告">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹出框 -->
  <el-dialog title="编辑" v-model="editVisible" width="30%">
    <el-form label-width="70px">
      <el-form-item label="编号" v-if="false">
        <el-input v-model="noticeForm.id"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="noticeForm.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="noticeForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <div style="margin-top: 20px; margin-left: 20px">
    <el-button @click="toggleSelection(tableDataNotices)">全选</el-button>
    <el-button @click="toggleSelection()">清除</el-button>
    <el-button @click="handleDeleteArray()">批量删除</el-button>
  </div>
</template>
<script setup lang="ts">
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<Notice[]>([]);
// 查询所有的公告并绑定到表格中
// 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<Notice[]>([]);
const tableNoticeRef = ref<InstanceType<typeof ElTable>>();

// 全选和清除按钮
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 < multipleSelection.value.length; i++) {
    await deleteNoticeUrl(multipleSelection.value[i].id).then((res) => {
      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<any>([]);
// 上传前对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();
};
</script>

 


                

        

        

    

  


    

      

        

            

              
                
                  JunLianHuang
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Python-pythonvue3前后端分离项目

				
			

			

				

					08-10
				

			

		

		

			
				
python vue3前后端分离项目

			
		

	



                

            
              



	

		

			

				
					
Vue3-知识结构-前后端分离

				
			

			

				

					weixin_44082271的博客
				

				

					12-23
					
					871
					
				

			

		

		

			
				
代理配置后，将请求的接口网址写成配置的端口并加上’/api’，浏览器在请求时会把/api之前的根路径替换成 ‘target’ 里的内容。是一个基于promise的HTTP库，可以用在浏览器和node.js中。在get / delete请求中，params里面的请求参数会被配置在URL中。在post / put 请求中，请求参数不需要params，被配置在body中。axios本身是XHR的封装，对axios的封装可以理解为二次封装。在main.js中封装，可以和axios二次封装完成一样的逻辑。

			
		

	



              


  
              

                


	

		

			

				
					
Django_Vue3_ElementUI_Release_003_前端Vue3项目初始化

				
			

			

				

					geji001的博客
				

				

					09-16
					
					966
					
				

			

		

		

			
				
1. 概念扫盲

Node.js是基于ChromeV8引擎，让JS在服务端运行的开发平台，就是JS的一种解释器
WebPack就是模块打包机，把浏览器不能直接运行的拓展语言找到并打包为合适的格式给浏览器直接使用
Vue基于WebPack构件项目的，并带有合理默认配置的，可以快速开发的完整系统
npm就是JS的包管理工具

2. 环境准备
2.1 nodejs下载安装及配置
nodejs download

2.2 安装Vue脚手架
npm install -g @vue/cli


2.3 创建Vue3项目

			
		

	





	

		

			

				
					
Element Plus 封装表格组件、表格查询、表格分页、动态表头，可编辑单元格【常用功能版本】

				
			

			

				

					m0_67584973的博客
				

				

					06-16
					
					8697
					
				

			

		

		

			
				
Element Plus 封装表格、可编辑单元格、表格查询、表格分页、动态表头组件

			
		

	



		

			
		



	

		

			

				
					
Vue3 + Django 前后端分离项目实现密码认证登录

				
			

			

				

					Python技术探索
				

				

					03-23
					
					3428
					
				

			

		

		

			
				
Vue3 + Django 前后端项目实现密码认证登录

			
		

	





	

		

			

				
					
Django3Vue3前后端分离项目

				
			

			

				

					LuiChun
				

				

					07-02
					
					945
					
				

			

		

		

			
				
谢谢各位大佬的贡献
1：安装django
2：dajngo3新建app，并且访问
3：dajngo3设置静态文件访问
4：django3安装rest_framework，并测试
5：dajngo3,vue3前端项目搭建,vue项目结构的介绍
6：django3，vue前后端分离数据请求
7：vue3中setup()函数的使用一
8：vue3中setup()函数的使用二

...

			
		

	





	

		

			

				
					
Vue3+TypeScript+Django Rest Framework 搭建个人博客（一）：框架代码初始化

				
			

			

				

					zgj0607的博客
				

				

					08-25
					
					893
					
				

			

		

		

			
				
本文适合对有 Python 语言有一定基础的人群，希望利用 Python 做更多有意思的事情，比如搭建个人博客，记录自己的所思所想，或者想找一个项目实践前后端分离技术等等。跟着本文可以了解和运行项目，本项目是在 Window 10 Professional 系统下开发

大家好，我是落霞孤鹜，上一篇介绍了开发博客的背景、技术栈，并介绍了如何搭建开发环境。这一篇介绍后端和前端的基础框架代码初始化，基于Django和Vue初始化项目框架代码，跑通Hello world。
一、后端框架代码搭建
后端 Pytho.

			
		

	





	

		

			

				
					
Vue（+ element UI + Django）编写学生管理页面

				
			

			

				

					未来来
				

				

					11-29
					
					1821
					
				

			

		

		

			
				
初学vue的时候写的，采用的是npm形式引入vue和element-ui，后端逻辑使用Django来写的，对于测试开发学习些测试平台，是个很好的入门文章。
写完后台的样子如下：

html代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-

			
		

	





	

		

			

				
					
使用 vue2.x + ElementUI 快速搭建一个后台 增删改查 管理界面

					
热门推荐

				
			

			

				

					IT小村
				

				

					02-01
					
					6万+
					
				

			

		

		

			
				
一、前言

CRUD 
自从使用了 vue2.0，就不想过多地去使用其他的含 JS 代码的前端框架如 BootStrap4、jQuery 等，想全程使用 vue 去搭建前端界面，因为 vue 的生态系统十分繁荣，ui 方面的库有 element-ui、iview 等。

这次①使用了vue搭建前端页面架构，绑定数据，②使用element-ui修饰界面。



二、搭建项目架构

具体可以去看之前的...

			
		

	





	

		

			

				
					
django + vue3 el-pagination怎么处理分页

					
最新发布

				
			

			

				

					10-12
				

			

		

		

			
				
在Django + Vue3项目中，使用Element-Plus的el-pagination组件处理分页可以通过以下步骤实现：  1. **安装依赖**: 确保你已经安装了`django`, `vue3`和`element-plus`。如果还没有安装，可以使用以下命令进行安装： ...

			
		

	





	

		

			

				
					
vue+element实现分页器效果（带搜索功能）

				
			

			

				

					Debug的博客
				

				

					11-26
					
					1041
					
				

			

		

		

			
				
不同数据下分页的效果
<div class="block">
  <span class="demonstration">页数较少时的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="50"
    page-size:"100">
  </el-pagination>
</div>
<div class="block">
  <

			
		

	





	

		

			

				
					
Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染、多级表头) - 个人使用总结

				
			

			

				

					ymzhao
				

				

					03-13
					
					2万+
					
				

			

		

		

			
				
element-plus@2.2.0 后提供的虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考。

			
		

	





	

		

			

				
					
二、Vue3前后端分离

				
			

			

				

					qq_41099494的博客
				

				

					09-25
					
					214
					
				

			

		

		

			
				
这里使用localStorage存储，将用户信息存储到localStorage,调用state时先读取。在浏览器回退时，push能回退到实现跳转的页面，replace会覆盖而直接回退到上一个页面。注意：使用箭头函数时，this对象指的当前，使用普通函数时，this对象不一定指当前。2.使用route.query.变量来取到对应的值，变量需要使用ref包裹。在url都传递了值的组件件跳转时，页面的参数数据不会变化。传统的页面布局：div+css+float实现。未登录时，部分内容不允许访问，会跳转带登录页。

			
		

	





	

		

			

				
					
vue3+django+elementplus 前后端分离项目开发实例(上）：后端开发

				
			

			

				

					weixin_44028181的博客
				

				

					02-19
					
					4057
					
				

			

		

		

			
				
声明一下，此次开发使用的是macOS系统，以下所有操作实例都是在macOS中进行
一、后端开发
（1）使用了python比较著名的一个web开发框架-Django框架，在接口设计中使用了Django下的restframework框架
需要安装的模块：
第一步：我的电脑装的是pyton3以及pip3,所在在终端安装django使用如下命令  pip3 install django
第二步：pip3 install djangorestframework.    //序列化使用，为了将对象转化为json数据传给

			
		

	





	

		

			

				
					
element-plus表格组件el-table 的使用

				
			

			

				

					lucky_ly的博客
				

				

					08-17
					
					1324
					
				

			

		

		

			
				
表格是在前端页面中是经常被用到的，尤其是管理系统，几乎每个页面都会存在表格，所以掌握表格组件是非常有必要的。element-plus提供el-table，el-table-column来渲染表格，

			
		

	





	

		

			

				
					
django前后端分离使用分页

				
			

			

				

					分享一点有用的知识
				

				

					03-08
					
					257
					
				

			

		

		

			
				
django前后端分离使用分页

			
		

	





	

		

			

				
					
Vue3+Django

				
			

			

				

					qq_35090060的博客
				

				

					02-07
					
					730
					
				

			

		

		

			
				
学习资料
菜鸟教程
Vue3官网教程
组件库
Elements



			
		

	





	

		

			

				
					
Vue3+Spring Boot前后端分离开发

				
			

			

				

					web13595829051的博客
				

				

					02-21
					
					1111
					
				

			

		

		

			
				
前言
之前本人在学习Vue3.x与Spring Boot整合时，遇到了诸如跨域、使用axios报错等问题，在成功解决后，总结了一些经验，于是将如何从零开始搭建Vue3.x+SpringBoot前后端分离项目写成文章，当分享和记录。示例使用的是Window系统。（默认已配置好Java环境、Maven、MySQL、npm以及下载并安装IDEA，因为本文目的是完成Vue3.x通过axios访问Spring Boot项目的接口）


安装Vue3.x
打开命令行工具（尽量用管理员权限打开）cmd或powershel

			
		

	





	

		

			

				
					
前后端分离项目 Vue3+SpringBoot 后台管理系统

				
			

			

				

					wang115t的博客
				

				

					02-19
					
					1550
					
				

			

		

		

			
				
Src 文件夹下-新建 test 文件夹以及 resource 文件夹。而且不会添加数据成功，并向客户端返回 1 条自定义异常 JSON 数据。注意：在 Idea 中，设置 CSS 样式，使用双斜杠//注解会报错。注意：test 文件夹下的包路径要与 java 的源代码路径要一致。添加 数据到数据库 成功后-返回自定义 JSON 格式的数据。并启动测试-查看 MyBatis-Plus 是否成功加载。如果在添加过程中，发生了异常，如提交的数据格式不对，后台直接将该异常进行了捕获。提交 JSON 格式的数据。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值