基于 Element-ui 实现简单的前端弹窗操作

一、需求描述

实现一个用户权限修改的功能，以列表的形式展示所有组长的信息，操作栏中有修改按钮，点击修改按钮弹出修改弹窗，在弹窗中选择新的组长。

二、代码实现

1.使用 Element-ui 组件库中的 el-table、el-dialog ：

<template>
    <el-main class="container">
        <el-table v-loading="loading" :data="leaderArr" stripe style="width: 100%" height="680px">
            <el-table-column prop="groupname" sortable label="组 名" />
            <el-table-column prop="name" sortable label="组 长" />
            <el-table-column prop="phone" sortable label="手 机 号" />
            <el-table-column label="操 作" width="100">
                <template v-slot="scope">
                    <el-button link type="primary" @click="handleClick(scope.row)"
                    >修 改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="设置组长"
            v-model="fpVisible2"
            width="20%"
            :before-close="handleClose2">
            <el-select v-model="fpLeader2" @change="onSelectLeader2">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <span style="display: block; margin-top: 20px;" slot="footer" class="dialog-footer">
                <el-button @click="fpVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirm2">确 定</el-button>
            </span>
        </el-dialog>
    </el-main>
</template>

2.通过变量控制弹窗显示或隐藏

这里使用的变量名为：fpVisible2

当点击修改按钮时，设置 fpVisible2 为 true：

handleClick(row) {
    this.fpVisible2 = true
 }

点击取消或者确定按钮时，设置 fpVisible2 为 false：

            handleConfirm() {
                this.loading = true
                httpInstance
                    .post('接口', {
                        '参数'
                    }
                    })
                    .then(response => {
                        if (response && response.status === 200) {
                            ElMessage({
                                showClose: true,
                                message: '修改成功',
                                type: 'success',
                            })
                        }
                        else {
                            ElMessage({
                                showClose: true,
                                message: '请求发生错误',
                                type: 'error',
                            })
                        }
                        this.fpVisible = false
                        this.loading = false
                    })
                    .catch(function (error) { // 请求失败处理
                        // console.log(error.message)
                        ElMessage({
                            showClose: true,
                            message: '请求失败',
                            type: 'error',
                        })
                        this.fpVisible = false
                        this.loading = false
                    })
            }

以上，在使用 Element-ui 组件库的基础上，功能还是较为容易实现的。