当前位置:   article > 正文

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

elementui 弹窗

一、需求描述

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

二、代码实现

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

  1. <template>
  2. <el-main class="container">
  3. <el-table v-loading="loading" :data="leaderArr" stripe style="width: 100%" height="680px">
  4. <el-table-column prop="groupname" sortable label="组 名" />
  5. <el-table-column prop="name" sortable label="组 长" />
  6. <el-table-column prop="phone" sortable label="手 机 号" />
  7. <el-table-column label="操 作" width="100">
  8. <template v-slot="scope">
  9. <el-button link type="primary" @click="handleClick(scope.row)"
  10. >修 改</el-button>
  11. </template>
  12. </el-table-column>
  13. </el-table>
  14. <el-dialog
  15. title="设置组长"
  16. v-model="fpVisible2"
  17. width="20%"
  18. :before-close="handleClose2">
  19. <el-select v-model="fpLeader2" @change="onSelectLeader2">
  20. <el-option
  21. v-for="item in options"
  22. :key="item.value"
  23. :label="item.label"
  24. :value="item.value">
  25. </el-option>
  26. </el-select>
  27. <span style="display: block; margin-top: 20px;" slot="footer" class="dialog-footer">
  28. <el-button @click="fpVisible2 = false">取 消</el-button>
  29. <el-button type="primary" @click="handleConfirm2">确 定</el-button>
  30. </span>
  31. </el-dialog>
  32. </el-main>
  33. </template>

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

这里使用的变量名为:fpVisible2

当点击修改按钮时,设置 fpVisible2 为 true:

  1. handleClick(row) {
  2. this.fpVisible2 = true
  3. }

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

  1. handleConfirm() {
  2. this.loading = true
  3. httpInstance
  4. .post('接口', {
  5. '参数'
  6. }
  7. })
  8. .then(response => {
  9. if (response && response.status === 200) {
  10. ElMessage({
  11. showClose: true,
  12. message: '修改成功',
  13. type: 'success',
  14. })
  15. }
  16. else {
  17. ElMessage({
  18. showClose: true,
  19. message: '请求发生错误',
  20. type: 'error',
  21. })
  22. }
  23. this.fpVisible = false
  24. this.loading = false
  25. })
  26. .catch(function (error) { // 请求失败处理
  27. // console.log(error.message)
  28. ElMessage({
  29. showClose: true,
  30. message: '请求失败',
  31. type: 'error',
  32. })
  33. this.fpVisible = false
  34. this.loading = false
  35. })
  36. }

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/852503
推荐阅读
相关标签
  

闽ICP备14008679号