element-ui使用作用域插槽的使用——结合具体代码案例

这篇博客讨论了在Vue.js应用程序中,如何处理表格行内的分配角色和修改用户信息功能。通过scope.row传递行数据,实现对话框内容的动态渲染。对于分配角色,直接使用传递的row数据;而对于修改用户信息,由于需要双向绑定,因此需要先通过用户ID获取详细信息并存储在data中,然后在对话框中进行编辑。
摘要由CSDN通过智能技术生成

背景

  • 背景: 一个table表格,每一行都有 分配角色和修改用户信息的功能
    点击对应按钮弹出如下不同的对话框
  • 问题:对话框中的内容不同—— 是如何通过scope.row 传值渲染的
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

分配角色

  • 直接渲染:传的是scope.row,showdialog函数里面 赋值给data中的user(这一行的数据而非一个ID),
    在dialog中直接使用
<!-- 分配角色按钮 -->
<el-button type="warning" @click="showSetRolesDialog(scope.row)"></el-button>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改角色信息

这个是需要进行双向绑定,所以需要在data里面定义

<el-button type="primary" @click="showEditDialog(scope.row.id)"></el-button>
    // 展示编辑用于的对话框
    async showEditDialog(id) {
      const { data: res } = await this.$http.get('users/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('查询用户数据失败~')
      }
      this.editForm = res.data
      console.log(res)
      this.editDialogVisble = true
      return this.$message.success('查询用户数据成功~')
    }
      // 查询用户的对象
      editForm: {}
修改用户信息对话框dialog

    <el-dialog title="修改用户" @close="aditClosed" :visible.sync="editDialogVisble" width="50%">
      <el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>

问题:为什么这个一定要传入Id值进行用户信息的提取,如果像上边那样直接把scope.row传进来可以吗

ps: 跟上边分配权限的是同一部分的两个按钮,相同点是都需要获取这一行的数据(上边的是直接获取数据 进行渲染就可以了,but 这个是需要进行双向绑定,所以需要在data里面定义的交互操作,)

  • 通过作用域插层 传入用户 ID,
  • 通过Id获取用户信息(用户信息存储的data中)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值