当前位置：首页 > article >正文

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

article 2024/11/16 20:17:52

使用 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，并通过方法实现编辑、删除、邀请等功能。