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

背景

• 背景： 一个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中）