接上篇-使用 element-plus 优化UI界面

使用 element-plus 可以让我们更容易创建一个精美且功能丰富的UI界面。接下来，我们将优化 GroupManagement.vue 组件，使用 element-plus 的表格、按钮、对话框等组件来实现一个更专业的小组管理页面。

优化后的 GroupManagement.vue 代码

1. 安装 `element-plus`

如果还没有安装 element-plus，可以使用以下命令进行安装：

npm install element-plus

2. 引入 `element-plus` 组件

在 main.js 中引入 element-plus：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 使用 `element-plus` 组件优化 `GroupManagement.vue`

我们将使用 el-table、el-button、el-dialog、el-input 等 element-plus 组件来优化页面。

<template><div><h2>小组管理</h2><!-- 小组信息和操作按钮 --><el-card class="group-info" shadow="hover"><div slot="header" class="clearfix"><span>网上邻居</span><el-button style="float: right" type="primary" size="mini" @click="editGroupInfo">编辑信息</el-button></div><p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX（小组简介）</p><el-button-group class="group-actions"><el-button @click="inviteUser" type="success">邀请用户</el-button><el-button @click="dissolveGroup" type="danger">解散群聊</el-button></el-button-group></el-card><!-- 小组成员表格 --><el-table :data="members" stripe style="width: 100%" v-loading="loading"><el-table-column prop="name" label="成员" width="180" /><el-table-column prop="school" label="学校" width="180" /><el-table-column prop="role" label="角色" width="120" /><el-table-column prop="joinDate" label="进组时间" width="180" /><!-- 操作列 --><el-table-column label="操作" width="220"><template #default="scope"><el-button @click="removeMember(scope.row)" type="danger" size="mini">移除成员</el-button><el-button @click="transferMember(scope.row)" type="primary" size="mini">转让小组</el-button></template></el-table-column></el-table><!-- 编辑小组信息对话框 --><el-dialog title="编辑小组信息" :visible.sync="dialogVisible"><el-input v-model="groupInfo.description" type="textarea" rows="4" placeholder="请输入小组简介" /><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="saveGroupInfo">保存</el-button></span></el-dialog></div>
</template><script>
import { ref } from "vue";export default {setup() {const loading = ref(false);const dialogVisible = ref(false);// 小组信息const groupInfo = ref({description: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX（小组简介）",});// 小组成员数据const members = ref([{id: 1,name: "Wu Jinxuan",school: "同济大学",role: "组长",joinDate: "2024年11月9日",},// 可添加更多成员数据]);// 编辑小组信息const editGroupInfo = () => {dialogVisible.value = true;};// 保存小组信息const saveGroupInfo = () => {dialogVisible.value = false;// 执行保存逻辑console.log("保存小组信息：", groupInfo.value);};// 邀请用户const inviteUser = () => {console.log("邀请用户");};// 解散群聊const dissolveGroup = () => {console.log("解散群聊");};// 移除成员const removeMember = (member) => {members.value = members.value.filter((m) => m.id !== member.id);console.log("移除成员：", member);};// 转让小组const transferMember = (member) => {console.log("转让小组给：", member.name);};return {loading,dialogVisible,groupInfo,members,editGroupInfo,saveGroupInfo,inviteUser,dissolveGroup,removeMember,transferMember,};},
};
</script><style scoped>
.group-info {margin-bottom: 20px;
}
.group-actions {margin-top: 10px;
}
.dialog-footer {text-align: right;
}
</style>

代码说明

el-card：使用 el-card 来显示小组信息，添加标题和操作按钮。
el-table：使用 el-table 显示小组成员数据，支持排序和样式。
el-dialog：使用 el-dialog 创建编辑对话框，用户可以编辑小组信息。
el-button-group：按钮组用于操作小组（邀请用户、解散群聊）。
数据绑定和方法：使用 ref 定义 loading、dialogVisible、groupInfo 和 members，并通过方法实现编辑、删除、邀请等功能。