Vue2&Element-ui编写可复用增删改查列表思路及实现方式

前提:堂弟在学校学计算机,有一个期末作业,需要做一个简单的UI界面
先看下基本效果
登录页面包含基本信息校验及登录和保存用户信息
Vue2&Element-ui编写可复用增删改查列表思路及实现方式_第1张图片
登录之后的列表页面显示 由于是多个tab中午没有太多时间就直接复用数据模式
整体代码在270多行左右
列表
Vue2&Element-ui编写可复用增删改查列表思路及实现方式_第2张图片
新增弹窗
Vue2&Element-ui编写可复用增删改查列表思路及实现方式_第3张图片
修改弹窗
Vue2&Element-ui编写可复用增删改查列表思路及实现方式_第4张图片
删除
Vue2&Element-ui编写可复用增删改查列表思路及实现方式_第5张图片
其实这里的新增和编辑是公用的一个弹窗 包括另外三个Tab的列表也是公用的一个列表和弹窗 这个只是基于功能的差异大小 设计的一种编码实现方式 tab可以是菜单。
列表的HTML结构代码&核心JS处理&数据枚举值
最后祝大家新年快乐,身体健康,心想事成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>登录平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        .table_list {
            width: 100%;
        }

        .main {
            margin: 12px;
            border: 1px solid #eee;
            padding: 12px;
            position: relative;
        }

        .m8 {
            margin: 8px 0;
        }

        .userInfo {
            position: absolute;
            right: 30px;
            top: 20px;


        }

        .userInfo span {
            color: #666;
            font-size: 12px;
        }

        .icon_title {
            margin-left: 12px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">教师列表</el-menu-item>
                <el-menu-item index="2">学生列表</el-menu-item>
                <el-menu-item index="3">学生选课</el-menu-item>
                <el-menu-item index="4">教师排课</el-menu-item>
            </el-menu>
            <div class="userInfo">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{this.infoUser.userName}}<i class="el-icon-arrow-down icon_title el-icon-s-tools"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-button type="text" @click="clickOut">退出登录</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="table_list">
                <el-button type="primary" class="m8" @click="addData" size="mini">新增</el-button>
                <el-table :data="listObj[activeIndex].dataList" style="width: 100%;">
                    <el-table-column type="index" label="序号" width="100"></el-table-column>
                    <el-table-column :key="index" v-for="(item,index) in listObj[activeIndex].column " :prop="item.prop"
                        :label="item.title">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="deletes(scope.row)">删除</el-button>
                            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog :title="objText[activeIndex][type]" :visible.sync="dialogFormVisible" @open="open">
                <el-form :model="userInfo" :rules="rules" ref="userInfo">
                    <el-form-item :label="studentText[activeIndex]" :label-width="formLabelWidth"
                        :prop="props[activeIndex]">
                        <el-input v-model="userInfo[props[activeIndex]]" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程" :label-width="formLabelWidth" prop="course">
                        <el-input v-model="userInfo.course"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button v-if="type==='edit'" type="primary" @click="addSubmit">确 定</el-button>
                    <el-button v-else type="primary" @click="addDataItem">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    infoUser: {},
                    userInfo: {
                        course: '',
                        index: 1,
                        teacher: '',
                        student: ''
                    },
                    objText: {
                        1: {
                            'edit': '教师编辑',
                            'add': '教师新增'
                        },
                        2: {
                            'edit': '学生编辑',
                            'add': '学生新增'
                        },
                        3: {
                            'edit': '学生选课编辑',
                            'add': '学生选课新增'
                        },
                        4: {
                            'edit': '教师排课编辑',
                            'add': '教师排课新增'
                        }
                    },
                    studentText: {
                        1: '教师名称',
                        2: '学生名称',
                        3: '学生名称',
                        4: '教师名称'
                    },
                    props: {
                        1: 'teacher',
                        2: 'student',
                        3: 'student',
                        4: 'teacher'
                    },
                    formLabelWidth: '80px',
                    dialogFormVisible: false,
                    activeIndex: '1',
                    rules: {
                        teacher: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],
                        student: [{ required: true, message: '请输入学生名称', trigger: 'blur' }],
                        course: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
                    },
                    listObj: {
                        1: {
                            column: [{ title: '教师', prop: 'teacher', }, { title: '课程', prop: 'course' }],
                            dataList: [{ index: 1, teacher: '成老师', course: '计算机' }, { index: 2, teacher: '王老师', course: 'JAVA程序设计' }, { index: 3, teacher: '张老师', course: 'C++面向对象' }]
                        },
                        2: {
                            column: [{ title: '学生', prop: 'student', }, { title: '上课表', prop: 'course' }],
                            dataList: [{ index: 1, student: '张同学', course: 'Web程序设计' }, { index: 2, student: '王同学', course: 'Java程序设计' }, { index: 3, student: '流同学', course: 'C++程序设计' },]
                        },
                        3: {
                            column: [{ title: '学生', prop: 'student', }, { title: '课程', prop: 'course' }],
                            dataList: [{ index: 1, student: '李同学', course: 'Rust语言' }, { index: 2, student: '王同学', course: 'Java程序设计' }, { index: 3, student: '流同学', course: 'C++程序设计' },]
                        },
                        4: {
                            column: [{ title: '教师', prop: 'teacher', }, { title: '课程表', prop: 'course' }],
                            dataList: [{ index: 1, teacher: '成老师', course: '计算机' }, { index: 2, teacher: '王老师', course: 'JAVA程序设计' }, { index: 3, teacher: '张老师', course: 'C++面向对象' }]
                        }
                    },
                    editId: 1,
                    type: 'add'
                }
            },
            methods: {
                handleSelect(index) {
                    this.activeIndex = index
                },
                // 删除
                deletes(row) {
                    const { index } = row
                    const dataList = this.listObj[this.activeIndex].dataList
                    this.listObj[this.activeIndex].dataList = dataList.filter(item => {
                        return item.index !== index
                    })
                    this.$message.success('删除成功')
                },
                // 编辑
                edit(row) {
                    this.dialogFormVisible = true
                    this.userInfo = { ...row }
                    this.editId = row.index
                    this.type = 'edit'
                },
                // 确定修改
                async addSubmit() {
                    let flag = await this.handelData()
                    if (!flag) return false
                    let dataList = this.listObj[this.activeIndex].dataList
                    let arrList = []
                    dataList.forEach(item => {
                        if (item.index === this.editId) {
                            arrList.push(this.userInfo)
                        } else {
                            arrList.push(item)
                        }
                    })
                    console.log(arrList, '数据')
                    this.listObj[this.activeIndex].dataList = arrList
                    this.$message.success('修改成功')
                    this.dialogFormVisible = false

                },
                handelData() {
                    let flag = false
                    this.$refs.userInfo.validate((valid) => {
                        if (valid) {
                            flag = valid
                        }
                    })
                    return flag
                },
                // 新增
                addData() {
                    this.type = 'add'
                    this.dialogFormVisible = true
                    this.userInfo = {}
                },
                // 新增确定
                async addDataItem() {
                    let flag = await this.handelData()
                    if (!flag) return false
                    let index = new Date().valueOf()
                    let data = { ...this.userInfo }
                    data.index = index
                    this.listObj[this.activeIndex].dataList.push(data)
                    this.$message.success('新增成功')
                    this.dialogFormVisible = false
                },
                open() {
                    this.$nextTick(() => {
                        this.$refs.userInfo.clearValidate()
                    })
                },
                close() {
                    this.$nextTick(() => {
                        this.$refs.userInfo.resetFields()
                    })
                },
                clickOut() {
                    localStorage.removeItem('userInfo')
                    this.$message.success('退出登录成功')
                    window.location.href = "./index.html"
                }
            },
            mounted() {
                let user = localStorage.getItem('userInfo') || {}
                if (Object.keys(user).length) {
                    this.infoUser = JSON.parse(user)
                }
            }
        })
    </script>
</body>

</html>

你可能感兴趣的:(ui,javascript,开发语言)