element-plus学习 -2025/3/18

{ ...this.form } 是 JavaScript 中的 ​扩展运算符（Spread Operator）​，它的作用是将 this.form 对象的所有属性“展开”到一个新的对象中
例如
form :{
name : '',
score:''
}

简易学生分数管理系统 element-plus实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
    <title>学生成绩管理系统</title>
    <style>
        .red-score {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 添加学生表单 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input placeholder="请填写姓名" :maxlength="20" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="分数" prop="score">
                <el-input placeholder="请填写分数" v-model.number="form.score"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="addStudent">添加学生</el-button>

        <!-- 分割线 -->
        <el-divider direction="horizontal" content-position="center"></el-divider>

        <div>
            <!-- 搜索框 -->
            <el-form ref="searchForm" :model="searchForm" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="searchForm.name" style="width: 240px"></el-input>
                </el-form-item>
            </el-form>

            <!-- 成绩大于 60 的筛选 -->
            <el-checkbox v-model="filterByScore">成绩大于 60</el-checkbox>

            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item>
                        <el-input v-model.number="minScore" placeholder="最低分" type="number" :min="0" :max="100"
                            style="width: 100px;"></el-input>
                        <el-input v-model.number="maxScore" placeholder="最高分" type="number" :min="0" :max="100"
                            style="width: 100px;"></el-input>
                        <el-button type="text" @click="resetScoreFilter">清除</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 学生表格 -->
        <el-table :data="filteredStudentList" border style="margin-top: 20px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="分数">
                <template #default="{ row }">
                    <span :class="{ 'red-score': row.score < 60 }">{{ row.score }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="{ $index }">
                    <el-button type="danger" size="small" @click="deleteStudent($index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <script>
        const { ElMessage } = ElementPlus;
        const { createApp } = Vue;

        const app = createApp({
            data() {
                return {
                    studentList: [
                        { name: '张三', score: 100 },
                        { name: '李四', score: 90 },
                        { name: '王五', score: 80 },
                        { name: '赵六', score: 50 },
                        { name: '钱七', score: 40 }
                    ],
                    form: {
                        name: '',
                        score: ''
                    },
                    searchForm: {
                        name: ''
                    },
                    minScore: 0, // 默认值 0
                    maxScore: 100, // 默认值 100
                    filterByScore: false,
                    rules: {
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'blur' },
                        ],
                        score: [
                            { required: true, message: '请输入分数', trigger: 'blur' },
                            { type: 'number', message: '分数必须为数字值' },
                            {
                                validator: (rule, value, callback) => {
                                    if (value < 0 || value > 100) {
                                        callback(new Error('分数必须在 0-100 之间'));
                                    } else {
                                        callback();
                                    }
                                }, trigger: 'blur'
                            }
                        ]
                    }
                };
            },
            computed: {
                filteredStudentList() {
                    let list = this.studentList;

                    // 姓名筛选
                    if (this.searchForm.name) {
                        list = list.filter(student =>
                            student.name.includes(this.searchForm.name)
                        );
                    }

                    // 分数区间筛选
                    if (this.minScore != null || this.maxScore != null) {
                        list = list.filter(student => {
                            const minMatch = this.minScore == null || student.score >= this.minScore;
                            const maxMatch = this.maxScore == null || student.score <= this.maxScore;
                            return minMatch && maxMatch;
                        });
                    }

                    // 成绩大于 60 的筛选
                    if (this.filterByScore) {
                        list = list.filter(student => student.score > 60);
                    }

                    return list;
                }
            },
            methods: {
                addStudent() {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            this.studentList.push({ ...this.form });
                            this.$refs.form.resetFields();
                            ElMessage.success('添加成功');
                        } else {
                            ElMessage.error('添加失败');
                        }
                    });
                },
                query() {
                    ElMessage.info(`找到 ${this.filteredStudentList.length} 条记录`);
                },
                deleteStudent(index) {
                    this.studentList.splice(index, 1);
                    ElMessage.success('删除成功');
                },
                // 重置分数筛选
                resetScoreFilter() {
                    this.minScore = 0; // 恢复默认值
                    this.maxScore = 100; // 恢复默认值
                    ElMessage.success('分数筛选已重置');
                }
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>

</html>

posted @ 2025-03-18 23:12  XYu1230  阅读(26)  评论(0)    收藏  举报